Read Me

Welcome

Introduction

Welcome to HotDog Professional 6!

This wonderful program is both an advanced HTML editor and a brilliant website development tool. If you are new to HotDog, you might want to take a look at our Evaluator's Guide , which guides you through all the information you need to know to evaluate this program for your own needs. Alternatively, read the HotDog Overview.

If you have used HotDog before, then further below is a list of our major additions. Alternatively, a more comprehensive listing of all the great new features that have been added to HotDog is available within the program's Help topic: New in HotDog Professional 6.

What is HotDog Professional 6? Speed, Precision, Control - The Gun Coder's Solution!

Affectionately known as HotDog Pro, this program is a professional tool used in all aspects of webpage and website design. HotDog Pro 6 is designed for webmasters who not only want complete control and flexibility in website development, but also great efficiency and ease-of-use.

Since the creation of the World Wide Web in 1989, Sausage Software has been at the forefront of companies responsible for extending the simple foundations of the Web with new technologies. This has enabled computer users all over the world to create a new class of sophisticated and revolutionary websites. When the original version of HotDog was released in June of 1995, it was the first HTML editor of its kind.

With Sausage's responsive and innovative approach to meeting the needs and wants of webmasters, HotDog has only become better and better with time. Over the last five years, HotDog has been downloaded more than any other HTML editor on the Internet, with download sites including: CNET, Rocketdownload, Tucows and Sausage.

Today, HotDog Pro is the most powerful and user-friendly text-based HTML editor on the market. Aimed at web enthusiasts and professional webmasters (known at Sausage as Gun Coders), the development of HotDog Pro 6 has been focused on the following design objectives.

  • Low Resource Usage and High Speed

  • Easy and Powerful Editing

  • State-of-the-Art Website Management

  • Quality Assurance Facilities

  • Customizable

  • Extended and Non-Intrusive Help

  • Accessibility Features in Conformance with W3C Accessibility Guidelines

These design objectives are discussed in greater detail within the Design Focus section of our Evaluator's Guide.

What's New in HotDog Professional 6?

At Sausage we love to stay in tune with what's new and what's cool. Not only is our HotDog Team proactive about researching and developing new technology in consultation with leading webmasters, but many of our wonderful customers are also proactive about providing us with their valuable feedback.

In accordance with the suggestions and requests made to our HotDog Team and on our Sausage Island Discussion Forum, we have enhanced most existing features and developed some great new features within HotDog Pro. Our most significant new developments include:

  • enhanced editor support for all the most popular web coding languages (HTML, CSS, ASP, VBScript, JavaScript);

  • new Navigation Viewer resource panel for quick over-viewing, navigating and editing of webpages (also highlights accessibility and syntax errors);

  • new Cascading Style Sheets resource panel for style sheet integration and editing;

  • new Font and Paragraph Formatting dialogs for easy style formatting within webpages;

  • new Scripts resource panel for adding pre-configured, webpage-enhancing JavaScript functions;

  • new Accessibility Editing dialog for improving webpage accessibility, plus accessibility options incorporated into all relevant dialogs.

What Do You Want To Do?

Read the Evaluator's Guide.

Read More About What's New in HotDog Professional 6.

Read the HotDog Overview.

Learn About Websites.

Learn About Syntax Checking.

Learn About Code Completion.

Learn About Style Sheets.


What's New In HotDog Professional 6

New In HotDog Professional 6

Introduction

HotDog Professional is a Text Based Web Authoring tool primarily used by High End Web Professionals or what we at Sausage refer to as "Gun Coders". With this in mind the simple mission of HotDog Pro 6 was to create "The Gun Coders tool of choice".

List of Improvements and Fixes in HotDog Professional 6.0

List of Improvements and Fixes in HotDog Professional 6.1

List of Improvements and Fixes in HotDog Professional 6.2

List of Improvements and Fixes in HotDog Professional 6.5

Top New Additions in HotDog Professional 6 Include...

> Performance

Number one priority for HotDog Pro 6 was to make it the optimal productivity tool for Gun Web Coders.

  • Lower Resource Usage.

HotDog 6 uses approximately 12% - 18% of system resources compared to HotDog 5.5, which used a minimum of 35% and potentially up to 100%.

  • Faster Loading Time.

HotDog 6 loading times range between 3 – 8 seconds, depending on system configuration, which is on average 4 times faster than HotDog 5.5.

  • Faster Document opening time.

HotDog 6 average document loading time is under one second, which is approximately 5 to 10 times faster than HotDog 5.5.

  • SDI (Single Document Interface).

The new HotDog 6 Document Interface allows you to open hundreds of documents with negligible use of resources.

> Enhanced Editor Support for Web Coding Languages

Gun Web Coders don’t just use HTML these days. As such, HotDog Pro 6 provides native text editing support for the most popularly used languages in modern Web Design.

  • Syntax Highlighting for HTML, CSS, ASP, VBScript, JavaScript.

Ability to create separate Syntax coloring schemes for individual language types.

  • Property Sheet Support for HTML, CSS.

Edit embedded Cascading Style Sheet properties just like HTML using the new Property Sheet.

  • Code Completion Support for HTML, CSS, ASP, VBScript, JavaScript.

Full Code Completion for all supported languages.

  • On the fly Syntax Validation for HTML, CSS, ASP, VBScript, JavaScript.

Full error checking for all supported languages during editing.

> Document Navigation

High-end HTML documents often contain thousands of lines of code. Gun Coders need ways to quickly open large text documents and quickly locate the code they want to edit.

  • New HTML Navigation View Resource Panel.

The HTML Navigation View distills a HTML file into a structured tree view, which can be filtered to show all tags, specific tag types or just major HTML objects.

  • Synchronized Tree/Document Tag navigation.

Navigation of tree view is tracked on the fly in the current document (and vice versa), selecting an item in the tree view will place the cursor in the corresponding tag in the current document.

  • Select/Collapse and Edit Tag in Document.

Right clicking any tree item will offer options to select or collapse the current tag in the Document. Double clicking an item in the tree view will open its corresponding dialog (if one is available) populated with the current attributes ready for quick editing.

> Cascade Style Sheet Authoring

Cascading Style Sheets are now used extensively in High End Web sites to provide complete control over look and feel from one single point.

  • New CSS Resource Panel.

To house all your CSS style sheets there is a new Resource panel, complete with a few of our own. This Resource panel is the focal point for all new CSS functionality.

  • New Create Style Sheet and Create Style functions.

HotDog Pro 6 has a completely revamped set of interfaces for Importing, Creating and Editing CSS style sheets and then applying them to your web pages. All CSS functionality is available through an intuitive and easy to use set of Wizards and point and click dialogs.

  • New Font / Paragraph Dialog.

Apply in-line styles to individual Font and Paragraph Tags using new easy to use point and click dialogs.

> Script Authoring

Scripting is another area widely used in High End Web sites. HotDog Pro 6 provides an easy to use interface to add scripting functionality to elements in your Web pages.

  • New Scripting Resource Panel.

The Scripting Resource Panel provides an interface to Add, Edit and Delete HotDog "ScriptBits" to the currently selected element in your HTML document.

  • Use HotDog "ScriptBits" to easily add scripting functionality to objects in your Web pages.

HotDog "ScriptBits" are pre-configured Java Script functions that can be manipulated, combined and configured via an easy to use point and click interface.

> W3C Accessibility Initiative

Accessibility is a vital aspect of good Web site design. The recently released W3C Accessibility Guidelines outline a set of recommendations on how to make web pages more accessible for people who are physically or mentally impaired or who simply wish to perform non-visual browsing.

HotDog Pro 6 comprises a number of new functions to help you quickly and easily make your new and existing Web Pages more accessible:

  • New accessibility dialog to list/edit all Accessibility errors in current document.

The new Accessibility Check dialog will check your current HTML page and provide a list of Accessibility Errors. Double clicking any error will open the appropriate HotDog dialog to allow you to quickly and easily add accessibility options to the selected HTML element.

  • On the fly Accessibility checking in HTML Navigation View.

All Accessibility errors are displayed at a glance in the HTML Navigation view. Double-clicking any item in the tree view will open the appropriate HotDog dialog to add accessibility options.

  • All relevant Dialogs have Accessibility options.

Every relevant HotDog dialog now contains an Accessibility button. Toggling this option will open an extra set of Accessibility fields for easy editing.

Using these accessibility options in HotDog Pro will assists viewers:

  • Without graphic display terminals.

  • Whose browsers don't support forms or applets.

  • Who are visually impaired.

  • Who use speech synthesizers.

  • Who have configured their graphical user agents not to display images.

To view the W3C Accessibility Guidelines simply point your browser to the following URL:

http://www.w3.org/TR/ATAG10/

Improvements and Fixes in HotDog Professional 6.0

Text Editing Improvements

  • Split Document View mode.
  • Document Drop Down list of all open files.
  • New syntax filtering options.
  • Gutter re-sizable with mouse.
  • Hidden Fields shows Spaces.
  • Dim hidden Fields option.
  • Intellimouse/mousewheel support.
  • New Calculate Image Dimensions for document function.
  • New Right Click Re-Calculate selected image function.
  • Convert Selection to "title case" function.
  • Can use mouse with Code Completion.
  • Code Completion highlights likely closing tag.
  • Select and Collapse HTML elements function.

FTP Improvements

  • Uploading a directory to the Internet Files panel no longer creates an extra blank directory in the panel.
  • Problems uploading to servers that specify that new directories don't exist have been fixed.

Websites Improvements

  • Opening and Closing Website files same speed as normal files operation.
  • Collapsible ranges remembered for all Website files between sessions.
  • Specify a Backup directory for a Website.
  • New Backup Website function on Website panel.
  • Uploading Multiple Website files uses the one connection, can specify "yes to all" when replacing files.
  • Website Wide Find and Replace Fix.
  • Website uploading progress bar does not sit in front of other applications.
  • Website external resource collection fixes.
  • HotDog preview file ~HDprev.htm will not be uploaded if it is in a Website that is being uploaded.

Macro Improvements

  • Add Macro from Font Dialog fixes - creates macro panel properly - inserts into proper position.
  • Deleting/Renaming macros fix.

Extended Character Improvements

  • Can Add/Edit/Delete Extended Characters.
  • Extended Character case sensitivity bug fixed.

Bookmarks Improvements

  • Improved Netscape bookmarks reading.

Local Files Improvements

  • Local Files panel has directory drop down box.

Internet Files Improvements

  • Can sort files in the Internet Files panel by the date modified.

General Application Fixes and Improvements

  • Running multiple instances of HotDog doesn't cause crash dialog to appear.
  • Added parameter to stop HotDog reopening files on startup - /nf.
  • New multiple instances checking code.
  • OLE (Object Linking and Embedding) Drag from resource panels.
  • OLE Drag and Drop for Multi-Line Clipboard.
  • Removed incorrect List Heading tag from Bulleted lists.
  • Resource panel drop down list of all open panels on that side.
  • Selected Resource Panel tabs stored between sessions.
  • Registered Company removed from publishing, email address added.
  • Publish function converts auto fields even if the file isn't open.
  • Spell checker checks selected text without checking tags.
  • Link Wizard inserts </a> tag.
  • New Tag Coloring options in Preference dialog.
  • New Syntax Filtering rules in Preferences dialog.
  • New Specify a Backup Directory in Preferences dialog.
  • New separate Syntax Coloring options for all different syntax in Preferences dialog.
  • Drop Down template menu for New Document toolbar button.
  • Checks if a file is read only when trying to save.
  • Document Tabs have save icons.
  • Right Click popup menu for document tabs.
  • Document Tabs show full file path as hint.
  • New "View" Toolbar - Resource Panel, Rover and Rover Ruler Buttons.
  • New buttons in "File" Toolbar - Import Text document, Close, Close All.
  • Added File Form Element.
  • Added Push Button Form Element.
  • Right click edit option for form elements.
  • Can specify which syntax manager to use for particular file extensions by default e.g. Use ASP highlighting for ASP files.
  • File Dialogs have an "Open File As" combo box, to specify syntax to use, e.g. ASP.
  • Can preview externally and locally through a local web server
  • Web browser search includes Opera
  • Preview uses file extension of current document, not .htm
  • Can insert tabs as spaces.
  • Can open files by dragging them onto the main HotDog form.
  • Local server previews includes the subdirectories of specified local drives.
  • Can view hexadecimal values in code completion.
  • Code Completion allows selection from Color Dialog and File Dialog for URLs.
  • Code Completion can display colors in hexadecimal.
  • MultiLine Find-and-Replace is included in Website.
  • File Dialogs remembers selected file filter.
  • Document restores position scrolled to, when switching documents.
  • Can use Bookmarks:

Ctrl + Shift + 0-9 to add new bookmark.

Ctrl + 0-9 to jump to a bookmark in the document.

  • Bookmarks are saved between sessions, if the document is part of an open Website.
  • Pressing <Alt> + <Shift> + any number from <0>-<9> inserts highlighted text into MultiLine Clipboard.
  • Pressing <Alt> + any number from <0>-<9> to insert text from MultiLine Clipboard to document.
  • Pressing <Alt> + <Enter> inserts <P> tag.
  • HTML Property Sheet Help synchronized with Property Sheet.
  • Can create backups to the directory of the current document.
  • Save As will use current directory if the file is already saved.
  • Code Completion "More Colors" and "More URLs" options.
  • Code Completion Uppercase/Lowercase preference.
  • Code Completion Hexadecimal/Color Names preference.
  • Code Completion Match case of attributes preference.
  • Syntax Coloring can be turned off.
  • Tag Coloring colors entire tag.
  • Syntax Highlighting fixes.
  • Colors and Images as Tooltips.
  • HTML Tag Coloring for ASP files.
  • Ctrl + double-click will select a tag.
  • WebSite Checks Tab allows for proxy settings.
  • Document Tooltips in HTML specific preferences.

... And a whole heap of other stuff that we just can’t think of now :o)

Fixes and Improvements in Version 6.1

Application Shell Functionality

  • No Delete Key problem when renaming files in the Local Files Panel.
  • Drag file to highlighted text going between tags and after tags.
  • Un-splitting a screen.
  • Document lists windows now changes size.
  • External preview window refreshes.
  • Help button in ImageLab fixed.
  • Dragging Internet files to highlighted text to create links.
  • Closes correct file when multiple files are open.
  • Local Files resource panel displays all files even if extensions hidden in Explorer.
  • In New File dialog box updated.

Cascading Style Sheet

  • Correct slashes used in CSS documents

FTP

  • Correct files displayed in Internet Files resource panel.

Navigation View

  • Viewer refreshes.

Resource Panels

  • Local Files panel refreshes correctly.

Rover

  • Rover can refresh automatically.
  • Rover remembers previous state.

Spell Checking

  • Spell check highlights misspelled words.

Syntax Files / Error highlighting

  • Frameset syntax correctly implemented.
  • ASP script attribute RUNAT recognized.
  • All attributes appear in IE extensions.

Text Document Editor Interface

  • Calculation of Image dimensions no longer removes Syntax Highlighting.
  • Editor windows always update properly.
  • No backspace problems.
  • <BR> now consistent with HD5.

Websites / FTP

  • Upload newer files only setting available.
  • Publish function converts auto fields.

Fixes and Improvements in Version 6.2

Application Shell Functionality

Fixed:

  • External Preview window not refreshing.
  • The help button in Image Lab not working.
  • Delete key not working properly when renaming files in the Local Files panel.
  • Problems occurring when trying to close files during HotDog startup.
  • Problem changing from split-screen mode without closing a file.
  • Feature to link to files, by dragging from Internet Files panel, not working properly.
  • Filenames on tabs not matching with actual files when multiple files opened.
  • Netscape 6 not recognized as a browser.
  • Backup files made for only one file even when editing multiple files.
  • HotDog 6 doesn't detect HotDog 5 macros.
  • Supertoolz not detected.
  • hdprev.html file created even when ROVER is disabled.
  • .shtml files cannot be previewed.
  • Save As dialogs do not display the current file name as earlier versions did.
  • Some hdprev.html files not being deleted automatically.
  • Previewing using an UNC path doesn't work.
  • External preview only works for .htm and .html files.

Installation / Registration (DLLs)

Fixed:

  • HD6.1 install expects macros to be available for importing.

Resource Panels

Fixed:

  • Local Files panel not updating files display.
  • Incorrect option in right-click menu of SuperToolz Resource panel.

Rover

New:

  • Rover remembers its maximized state.

Fixed:

  • Rover not remembering state when opening/closing a website.

Syntax Files / Error highlighting

Fixed:

  • ASP Script attribute RUNAT not recognized.
  • Missing attributes from IE4 and IE5 extensions.

Text Document Editor Interface

Fixed:

  • Calculating Image Dimensions removes syntax highlighting.
  • Redraw problems when switching between HotDog and other applications.
  • Typing [CTRL]+[Enter] stops text selection to the right of the cursor with the mouse.

Websites / FTP

Fixed:

  • Website files not opening/closing when opening/closing a website.
  • hdprev.html file gets uploaded using the Upload Website function.
  • Publishing incorrectly converts comments tags.

Spell Checking

Fixed:

  • Words not selected properly when spell checking.

Fixes and Improvements in Version 6.5

Application Shell Functionality

Fixed:

  • Increase in speed when loading files.
  • Color Palette no longer appears too low on screen in low resolutions, and can be positioned on a second monitor screen when using dual monitor mode.
  • All URLs in program changed to refer to new SausageTools website.
  • HotDog will now remember the open files if you close HotDog using the [File][Exit] menu.
  • Menu Text changed from "Publish All Openning Documents" to "Publish All Open Documents".
  • Edit Macro help button now points to correct help page.
  • Windows 98 and Windows 2000 system information are added to the status bar "Easter egg".
  • Page redirection can now be turned off via the Document Information dialog.
  • Changes to text in Preferences dialog to make it more concise and accurate.
  • Can save files with .htm extension by default. Note: In Windows NT - "Hide file extensions for known file types" should be off under Windows Explorer's [View][Options] menu.
  • Code Completion's automatic tag closing work-around removed (made unnecessary by fixes to text input).
  • HTML code completion now works in php/asp documents.
  • Uncheck the redirection checkbox and the appropriate <meta> line will be deleted from the document.
  • "Buy HotDog" menu options now direct to the appropriate purchase page for users who are upgrading.
  • A warning message will appear when attempting to save a changed readonly file.
  • Saving to the directory above a file's current directory now works. (Previously saved to old directory).
  • Inserting (from the toolbar) then editing a line (using right-click) no longer causes irregularities in code.
  • When using the document information panel a second set of <Title> tags are no longer added to the document.
  • File tabs now show the correct file name for the currently open file.
  • Converting text to upper/lowercase has been streamlined with a "wait" cursor.
  • Read-only files support corrected.
  • Screen updating is optimised for speed.
  • "Save as" without preview's file filter index has been corrected.
  • Many functions optimized in code.
  • Empty toolbar text no longer appears in corner of occupied toolbar space when program window is less than maximum screen width.
  • "Save" icon no longer remains grayed-out after a replace operation.

New:

  • Can now specify the encoding of files opened and saved (choose between unicode (UTF-16), unicode (UTF-8), unicode (UTF-8 no signature) and ANSI.
  • New "Copy File As" function in the File menu allows you to save a copy of a file, and continue working on the new copy while the old copy is still open in the background.
  • Can open multiple files from the File Open dialog.
  • Can drag and drop the file tabs to rearrange their order and HotDog will remember their order if you have it set to reopen the files next time HotDog starts.
  • Now prompted to save if you change file end-of-line type and close.
  • Button added to Editing Window footer to disable/enable Code Completion.
  • Php, php3 and phtml extension are all now acceptable.
  • Warning dialog now displays if you attempt to save a read-only file
  • PHP file types now default to being editable by HotDog.
  • If the BODY tag has been removed from a document and you attempt to use [Format][Document Properties] a warning dialog appears to remind you to add a BODY tag to the document.

Text Document Editor Interface

Fixed:

  • All new HTML tags from wizards and resource panels are generated in lowercase.
  • Input of extended characters (international keyboard support) much improved. Now allows Cyrillic, Thai, Chinese and similar languages.
  • Caret now appears when title bar is clicked in split-screen editing mode.
  • Editing an existing <image> tag now includes its attributes.

HTML Tags Resource Panel

Fixed:

  • Entering tags from the HTML Tags panel no longer changes the case of selected text in the document.
  • Tags invoked by shortcuts are now entered in lowercase.

HTML Property Sheet

Fixed:

  • HTML Property Sheet can now be used to edit HTML embedded in PHP and ASP documents.
  • Property Sheet no longer "attaches" to the wrong document.
  • Right-click option to sort properties now works.
  • Using HTML Property Sheet to edit <style> sections doesn't insert extra semicolon characters or spaces anymore.
  • The RIGHTMARGIN, BOTTOMMARGIN, LEFTMARGIN, TOPMARGIN attributes of the BODY tag are corrected.

Syntax Files / Error highlighting

Fixed:

  • Syntax Highlighting optimized. Should be considerably faster, especially on scripting documents with large sections of comments.
  • "in" no longer identified as an error in VBScript.
  • Syntax rules/filters specified in preferences now take effect and work correctly.
  • Syntax Highlighting now works properly on remotely opened ASP, PHP and JavaScript files.

New:

  • PHP Keywords and function names are now recognised and highlighted.
  • Tag coloring (HTML) now works in all scripting languages with embedded HTML tags.

Program Registration Module

Fixed:

  • SausReg has been updated to prevent search for an email address. This stops the MAPI and RPC errors.

Websites

Fixed:

  • Dragging an image from the WebSites panel will create an IMG tag and not a HREF.
  • Go forward/backward/clear "WebSites" dockpanel bugs corrected.

New:

  • You can now drag and drop files from the WebSite panel to the Internet Files Panel (can also multiselect).
  • Improved keyboard support. Double clicking/CR will open a marked file. A single Carriage Return will also open multiple selection (Control + Left-Click).

Internet Files

New:

  • You can now use CHMOD style numbers to alter file permissions when using Internet Files.
  • Internet Files file list now updates (refresh) on file saves.
  • Illegal characters are now not permitted when creating a new server definition.
  • Improved keyboard support. Double clicking/CR will open a marked file. A single Carriage Return will also open multiple selection (Control + Left-Click).
  • You can now set Timeout to 0.
  • It is no longer possible to create a second server profile with the same name as an existing server profile.

Local Files

Fixed:

  • Parent and sub folders now get included in the link created from dragging a HTML file onto the document.
  • The file list mode button now displays the image of the mode that it would switch to if clicked on.

New:

  • Improved keyboard support. Double clicking/CR will open a marked file. A single Carriage Return will also open multiple selection (Control + Left-Click).

Publishing

Fixed:

  • File Format selected when publishing now really takes effect.
  • Documents are no longer indicated as "unsaved&q uot; when published.
  • File end-of-line format selected when publishing now takes effect.

Macros

Fixed:

  • Macros are no longer inserted as a single line when using the shortcut key.

Help

New:

  • Help added to the HTML Property sheet for all Netscape and Internet Explorer tags listed in the HTML Tags resource panel (e.g. BLINK, BGSOUND, ILAYER etc).

Fixed:

  • Scripting errors in the help files fixed.
  • HTML Property Sheet help revised to remove outdated content.


HotDog Overview

HotDog Pro 6 Overview

What is HotDog Pro 6?

Welcome to HotDog Professional 6. HotDog is an advanced HTML Editor and Website Development Tool. Most programs that let you build webpages hide the HTML that forms their source. While this can be useful for the novice, it ultimately limits the type and design of webpages you can build. Rather than hide the HTML code away - HotDog embraces it fully, providing you with many tools that manipulate the power and precision of full-blown HTML. Using the HotDog Editor and the HTML Property Sheet, you are continually informed about the various properties and attributes of HTML tags. By approaching HTML in this manner, we have managed to make it quick and easy to learn whilstgiving you precise control over the design and look of your webpage.

To meet the demands of modern web authors - we have included syntax support for the following file types in addition to HTML:

  • CSS (level 1 & 2).

  • JavaScript.

  • VBScript.

  • ASP.

HotDog Pro can be conceptualized as having several parts with the HotDog Shell wrapping them all together.

The HotDog Shell contains:

  1. The Editor

  2. A Menu and Toolbar System

  3. Resource Panels

  4. Access to SuperToolz

The HotDog Shell

The HotDog Shell gives you access to Preferences, Toolbars, common HTML tasks (such as inserting Images/Tables etc.) and online help. Among other things, the Resource Panels are opened and closed from the HotDog Shell.

HotDog Helps You Learn HTML

We put a lot of thought into the design of the HotDog Shell. When designing each dialog, as well as considering ease of use, we also tried to enhance the learning process. So, for example, the Table Wizard not only helps you insert a table into your webpage, it provides tips on how to use a table and contains diagrams demonstrating the various attributes in tables, such as Cell Padding and Border Colors.

The Table Wizard

Starting the Table Wizard

  • On the Table menu, select Table Wizard.

The use of wizards gave us the ability to present complex or prolonged tasks in a clear and simple manner. For example, adding a new server address to HotDog is explained step-by-step in the Internet Site Wizard.

At the end of the wizard you will have not only defined a new Server Address, but have hopefully learnt a bit about what a Server is and why you needed to define a Server Address in the first place.

Lots of Help

Each dialog has a Help button. This help button contains links to extended help as well - that is, not only is the functionality of dialog explained, but the background as well. For example, the help for the Internet Site Wizard expands upon the help contained within the wizard, but also links to a step-by-step guide on using the wizard. This guide is typical of many included with HotDog, in that it explains basic concepts and terminology so you have a firm grounding on what is actually going on.

Starting the Internet Connection Wizard

  1. On the View menu, choose Resource Manager and then choose Internet Files.

  2. In the Internet Files Resource Panel, click Add New Connection.

Customizing HotDog

Flexibility and customizability remains a key issue in the design of HotDog. All toolbars are completely customizable and you can define shortcut keys for almost everything. When creating webpages the HotDog Team found that being able to quickly insert commonly used tags and text into a document was of paramount importance. To address this issue we incorporated four features into HotDog Pro.

  • Shortcut Keys for HTML Tags.

  • Shortcut Keys for user defined Macros.

  • MultiLine Clipboard.

  • Ability to add Tags and Macros to a Toolbar.

The HTML Tag Manager

Each HTML tag can be assigned its own shortcut key. This way you can significantly speed up the editing process. Common tags to associate with shortcut keys could be the <BR> and <FONT> tags.

The Macro Editor

Frequently more complex text than plain tags needs to be inserted into documents. A common example is the <BODY> tag or Meta tag information containing search terms. Perhaps you just have a common font effect you want at your fingertips. Using the Macro Editor, you can build your own tags. Furthermore, these tags automatically wrap around highlighted text when you insert them. For example, say you have defined a Macro with the following values:

  • Text Before: <FONT COLOR="#CCCCCC">

  • Text After: </FONT>

  • Shortcut Key: CTRL + ALT+ G

If you highlight some text in your document and press <CTRL> + <ALT> + <G> the text will automatically be wrapped with the font tags:

<FONT COLOR=”#CCCCCC”>...some text...</FONT>

Adding Tags and Macros to a Toolbar

If HotDog is your chief HTML editing tool, creating your own toolbars and adding your own buttons to them is vital. With HotDog, not only can you add Tags to a toolbar, you can also add your own Macros.

The MultiLine Clipboard

When working with a several documents, it is convenient to be able to store a few pieces of different text. The MultiLine clipboard is a floating clipboard that can store as much text and colors as you need. Just copy any text you want to save and paste it in to the MultiLine Clipboard. Drag and drop out any text you want to paste into your document.

Preferences

You can customize just about anything in HotDog. If you use an editor for a long period of time, you will probably want to be able to adjust the look and feel of the editor to your own needs. The Preferences window lets you change how HotDog operates.

Creating a Shortcut Key for a HTML Tag.

  1. On the View menu, choose Resource Manager, then choose HTML Tags.

  2. Select the Tag you want to add a shortcut key to.

  3. In the ShortCut Key field at the bottom of the HTML Tags manager, select a shortcut key.

The Macro Editor

  • On the View menu, choose Resource Manager, then choose Macro Editor.

Adding a New Macro

  • In the Macro Editor, click Add New Macro.

Adding a Shortcut Key to a Macro

  1. In the Macro Editor, click on the Macro to which you want to add a shortcut key.

  2. In the ShortCut Key field at the bottom of the Macro Editor, select a shortcut key.

Customizing Toolbars

  • On the View menu, choose Toolbars and then choose Customize.

Adding Macros and Tags to your Toolbars

  1. In the Customize Toolbars window, click the Tags tab. Then drag and drop any tags you want to add to the toolbar.

  2. To add a Macro, click on the Macro tab. Then drag and drop any macros you want to add to the toolbar.

MultiLine Clipboard

  • In the Edit menu, choose Resource Manager and then choose MultiLine Clipboard.

Changing Preferences

  • In the Edit menu, choose Preferences.

The HotDog Editor

Each document in HotDog is opened and edited with the HotDog editor. Usually editors are only given brief consideration by users because, by all outward appearances, they look the same. The HotDog editor is deceptively powerful. As well as the basic functions (word wrap etc.) listed at the bottom of each document, the HotDog editor can also collapse text and more.

Example HTML Code

(In the example above, “MIDDLE” is the valid value for the VALIGN attribute. To avoid creating simple errors like this, use Code Completion in conjunction with the HTML Property Sheet)

Typical ToolTip Help

Tag and Attribute Highlighting

Changing the color of tags helps you pick out the information you need to find from a jumble of HTML. It is particularly useful when you are trying to study other people’s HTML. For example, if you are interested in image tags, then color them green. This way they stand out against all the clutter of surrounding tags.

Syntax Validation

As you type, if you make any syntax errors, HotDog will notify you immediately. HotDog usually recognizes what the error is and will tell you what part of your tag is incorrect. HotDog will also describe the full HTML specification of the tag. See the HTML Property Sheet described below for more details on how to work with HTML. You can also specify which syntax files will be recognized in your work. For example, to be on the safe side, you might only wish to use the HTML 3.2 syntax file. This means that any tags or attributes you type that don’t form part of this specification will be underlined.

Bookmarks

Bookmarks are a quick and simple way of marking certain places within your document. Being able to jump from one place to another in your document significantly speeds the editing process.

Collapsible Text

Text collapsing lets you collapse, or roll up, different parts of your document. The advantages are clear - when you have finished a part of your webpage, be it a table or a paragraph, you can just collapse it and get it out of the way. This way you don’t have to scroll through finished work or risk changing finished work through accidental keystrokes. This tool makes editing larger documents very much easier. If your document is part of a Website your bookmarks and collapsed text are remembered - even when you close down HotDog.

Spell Checking

HotDog comes with a spell checking system. To correct a misspelled word, right-click over it to gain a list of 16 suggestions. Slide the mouse down to the word you want to insert and click. Or, to spell check your entire document, start the Spell Checker.

Follow Links From Within a Document

When editing HTML documents we realized how useful it is to open documents referenced from inside your current document. From within the ROVER view of an open document, right-click on a link to another document.

Improved Image Manipulation

One of the problems with HTML and images is that you can’t see what the image looks like just by staring at the HTML. HotDog includes mouse-over imaging. That is, if you hold your mouse over an IMG tag, a small thumbnail image of the picture appears. This is a quick way to check which image is which.

If you want to do serious image manipulation - such as file size optimization, right click over the image and select Preview Image. This window displays all of the image properties. To optimize the image, click Convert. There you can choose different file formats; compress your image and more.

Open a New Document

  • On the File menu, choose New, then click OK.

HotDog has Advanced HTML Help

If you hold your mouse over a tag or attribute, popup help appears giving you a short description of the tag or attribute. For example, if you hold the mouse over the BORDER attribute in the TABLE tag, a popup message appears saying: Sets the size, in pixels, of the table border.

Turning on Tag Highlighting

  • At the bottom of the document, click the Tag Highlighting button:

  • Use the HTML Tag Manager to define the colors for the different tags.

Turning on Syntax Validation

  • At the bottom of the document, click the Syntax Highlighting button:

  • Use the HTML Tag Manager to define new tags.

Define Syntax Specifications to use on your Document.

  • In the Edit menu, choose Preferences, then navigate to Syntax Filters.

  • Using the Language drop-down list select HTML.

  • Using the Filter Rule drop-down list select the syntax specification you wish to use.

Adding/Recalling Bookmarks

  • On the line you want to add the bookmark, press <CTRL>+ <SHIFT> and a number from 0 to 9.

  • Press <CTRL> and a number from 0-9 to recall a bookmark.

Collapsing Text

  1. First add a bookmark to the block of text you want to collapse.

  2. Press <CTRL> + <-> to roll up or roll down the text.

To Start the Spell Checker

  • Press F7 or click on the Spell Check button:

  • Alternatively, on the Edit menu, select Check Spelling.

Follow Links from Within a Document

  • In the ROVER view, right-click on a link to another document

Preview Images

  • In the Edit menu, choose Preferences, then navigate to Editing Window\HTML Specific.

  • Tick the Images as Tooltips option. Click OK to save the changes.

  • Now, when you hold the mouse over an image tag, the image will appear.

Change Image Formats

  • Right click over an Image tag and select Preview Image. Then click Convert.

Code Completion and Integrated HTML Help

Code completion gives you a new way of inserting tags and attributes. Because HotDog knows the entire HTML, CSS, ASP, JavaScript and VBScript specifications, it can present you with all the possible attributes for each tag, and where possible, the values that are associated with each tag. For example, the ALIGN attribute can only have a set number of values. All are listed in the code completion window.

Use the HTML Property Sheet to gain HTML help that dynamically updates with your code completion window as you scroll through each attribute.

Opening the HTML Property Sheet

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select HTML Property Sheet.

Using Code Completion

  1. Click anywhere in the currently opened document.

  2. Press <CTRL> + <SPACE>.

  3. Use the arrow keys to select the attribute or tag you want to insert.

  4. Double-click to insert the currently selected tag or attribute.

Setting Code Completion Preferences

  • In the Edit menu, choose Preferences, then navigate to Editing Window\Code Completion.

  • Set your preferences as desired, then click OK.

Using the Browser Window in HotDog

HotDog supplies many different ways of previewing your document while you work.

How the Different Browsers are Setup on Your System

HotDog comes with it’s own internal browser, ready to go. This browser however is primitive, and cannot display JAVA or Dynamic HTML. When you first install HotDog, if you have Internet Explorer (I.E.) installed on your system, you will be asked if you want to use I.E. as the internal browser instead of HotDog’s default browser. It is recommended that you accept this option. Whatever browser you use as the internal browser, is called ROVER.

Rover is the most unobtrusive method of browsing your documents. If you are using the default browser as ROVER and want to display complex effects, use an External Browser.

Before completing a webpage, have a look at it inside different browsers. Use the External Browser function for this. HotDog will search for and automatically install any External Browsers it finds on your system when you start HotDog for the first time.

Setting the Browser Size

For a professional web designer, one of the key limitations in webpage design is how it looks under different screen sizes. HotDog’s internal browsers now incorporate rulers that allow you to expand or contract the size of a webpage. This means you can instantly see what your webpage looks like under a browser viewed in a 640x480 screen resolution. Furthermore, since you can slide the rulers, you can gauge how your webpage degrades under different browser dimensions. When working towards browser constraints, HotDog gives you perfect pixel control.

How to Surf From Inside HotDog

By using the Web browser, you can surf from within HotDog. Just open the Web browser and enter a URL into the drop down list box.

Downloading webpages, Ready for Editing

If you want to download a webpage that you have surfed to (including the images!) click the [image] button in ROVER.

The webpage and its images are downloaded and opened into a new document ready for you to edit! This way you see the tricks different web masters use to create their webpages.

3 Different Browsers

  • ROVER.

  • Internal Web Browser.

  • External Web Browser(s).

  • Press F9 to display your document in an External Browser, like Netscape.

  • Choose the External Browser that your document displays in when you press F9 by selecting the browser under Preview Document in the File menu.

  • Press <CTRL>+F9 to refresh the display of your document in ROVER.

Turning ROVER On

  1. On the Edit menu, select Preferences.

  2. In the Preferences window, click ROVER.

  3. In the ROVER window, click ROVER is enabled.

  4. Select the browser you want ROVER to use.

  5. Click OK and restart HotDog.

Setting Different Browser Sizes

  1. Open the ROVER or Web Browser

  2. In the Browser window, click on the Width box and select a width (640, 800, 1024) or type in the width you want. Alternatively, drag the slider bar to a new width.

  • To change the height of the Browser window, drag the top of the Browser window to a new position.

How to Surf From Inside HotDog

  • At the top of ROVER, enter the URL to which you want to surf.

Downloading webpages From the Net for Editing

  1. In the Web browser, enter the URL of the page you want to download.

  2. Click the [image] button.

Resource Manager

As more and more functionality was added to HotDog we had to look for a place to put it. Resource Panels were our solution. A Resource Panel is a floating resizable window that groups similar functionality into the same place. Each Resource Panel performs a specific task related to web authoring.

So for example, if you wanted to insert extended characters into your document (such as © etc.) then you would open the Extended Characters manager:

  • On the View menu, choose Resource Manager then choose Extended Characters.

Generally, functionality that helps you create webpages but does not actually edit them directly can be found in the Resource Manager. For example, the Internet Files Resource Panel is concerned with the uploading of documents to the Internet. There are however special Resources that do edit your page, such as the Extended Characters Manager, which lets insert foreign characters into your document.

Resource Panels are opened from the View menu. HotDog also includes typical Resource Manager presets, such as those that might be used for uploading documents to the Internet.

If you want to show or hide all opened Resource Panels with a single click, then click on the Show/Hide Resources button located in the toolbar:

Right-clicking on this button allows you to edit your Toolbar settings.

Opening Resource Manager

  • Resource Manager are opened and closed from the Resource Manager on the View menu.

The Resource Manager Contains:

  • Local Files.

  • Internet Files.

  • HTML Properties.

  • Websites.

  • Macro Editor.

  • HTML Tags.

  • SuperToolz.

  • Extended Characters.

  • Netscape Bookmarks & Internet Explorer Favorites.

  • MultiLine Clipboard.

Using Preset Resource Configurations

  • On the View menu, choose Resource Manager, and then choose Configurations.

Using the HTML Property Sheet with HotDog

The HTML Property Sheet helps you code HTML. It contains all the tags and attributes used by the major browsers, Netscape and Microsoft Internet Explorer. By entering tag attributes directly into the HTML Property Sheet you can save time.

In the example to the left, a user has typed <IMG> and has clicked on the SRC attribute in the HTML property sheet. This opens a file picker allowing the user to select an image. Notice the help on the SRC attribute at the bottom of the HTML Property Sheet.

Opening the HTML Property Sheet

  • On the View menu, choose Resource Manager and then choose HTML Porperty Sheet.

State-of-the-art Website Management

Webmasters have long been demanding a HTML Editor with advanced Website management facilities. HotDog Professional 6 plugs the gap with full-featured Website management tools. Inside the Website Manager, it’s possible to assign tasks, filter files or perform multiple search-and-replace procedures on designated files.

To Open the Website Manager:

  • On the View menu, choose Resource Manager and then choose Websites.

(For more details see the Website Manager help.)

HotDog Professional 6 Websites are based entirely on a local mirror system and does not use proprietary formats to define a Website. A HotDog Professional 6 Website defines a set of directories and files on a local computer and provides the ability to quickly publish these directories and files to another computer (usually an ISP’s Web server, i.e., the Internet). This makes it possible to create, edit and preview a Website on a local computer and then automatically copy the changes to a Web server where an entire audience can see the site via the Internet.

HotDog Professional 6 stores a Website definition in a .HWS file. This file contains the following information:

  • The location of the directories and files that have been defined as a Website.

  • All the publishing and upload preferences that have been set for that Website.

  • The exact configuration of the HotDog interface and all the webpages (page positioning, bookmarks, collapsed ranges) when the Website was last saved.

  • All tasks, defined, completed or otherwise when the Website was last saved.

This file allows HotDog to automate many of the repetitive tasks involved in managing a Website, whilst not changing or affecting an actual Website file structure or individual webpages. More importantly, it allows multiple Webmasters to work concurrently on a single Website in a fully team-based environment – Website Co-ordinators can completely manage their team from within HotDog.

File Management

HotDog Professional 6 sports a powerful file management interface making it possible to create, add, remove and edit Website files within a single view. You can drag and drop files from local or remote file lists to easily add files to a Website. Full control is held over Website structure and it’s easy to re-organize entire directory trees quickly. Choose to apply Website features across single or multiple documents, directories or even to an entire Website.

Publishing

Websites makes it easy to upload a site and any associated files that are needed to make the site work properly on a Web server by means of publishing. When publishing a Website, you can:

  • Publish to a local directory or a remote Web server.

  • Upload any necessary support files (fully customizable).

  • Only upload any changes that have made been made to the Website.

  • Replace user-definable sections of webpages when uploading (for example, a legal notice that’s common to every page).

Website Wizard

The HotDog Website Wizard turns the process of defining a Website into a simple step-by-step procedure. There are three ways to start a HotDog Professional 6 Website:

  • Create an entirely new HotDog Website and associated file structure.

  • Define a HotDog Website from an existing Website file structure on a local or networked computer.

  • Define a HotDog Website from an existing Website file structure on a Web server.

Tasks List

Tasks List is a list of user-defined tasks relating to the Website which may be assigned from one user to another, or simply as reminders to the current user. Each task can be associated with a particular webpage within the Website, thus enabling the ability to quickly edit a file without hunting around the entire Website. Tasks also have user definable priority and status flags to easily track individual task progress. This feature makes a Website Co-ordinator’s job a lot easier by being able to manage their team completely through HotDog.

Error Checker

A built-in mechanism is supplied for error-checking all of the webpage links across an entire site. The Error Checker will automatically:

  • Check a Website’s local links, displaying any broken links that it finds.

  • Check a Website’s remote links, which can be checked for validity.

  • Allow editing of any broken local or remote links in place and automatically change all references to the link across an entire Website.

Resource Checker

Websites are also supplied with a built-in Resource Checker for locating external resources (links to files outside of the local Website directory tree) across an entire Website. Resource Checker will automatically:

  • Validate a Website’s local links, displaying any external resources that it finds.

  • Automatically collect the resource and alter all links to it.

  • Allow editing of any external links in place and automatically change all references to them across an entire Website.

Local Browser

In addition to the Websites Manager, HotDog Professional 6 also provides an internal Website browser, thus allowing the ability to view a Website as it will appear on the Internet. Whilst browsing the site, it’s possible to edit the current page, seeing the changes appear as they’re made. It’s also simple to add associated tasks for the current page. This is an ideal way for someone who may not be completely HTML literate (but is completely familiar with concepts and what it means to create a Website) to browse a Website and quickly and easily coordinate Website updates (for example, a Website Co-ordinator, who orchestrates, rather than develops, a site project).

Global Website Replacement

Websites possesses the ability to make major appearance changes across an entire Website. Websites can automatically replace:

  • document properties (body tags).

  • document information (meta tags).

  • plain text across webpages, a directory, or an entire Website at once.

Multi-user Interface

Websites now facilitates multiple users, which means that teams of Webmasters working on a local network are able to define their HotDog Website on a shared network drive. Each person working on the Website starts HotDog and opens the same HotDog Website – that is, the .HWS file, normally located in the top-most directory of a Website structure. All changes made to the Website are reflected in the other users’ Websites Managers.

Websites also features file-locking, so that if one user is editing a webpage via Websites, it is then locked away from all other users working on that Website until the file is closed.

Other Resource Managers...

Local Files

The Local File Manager is very similar to Windows Explorer™. You can use the Local File Manager to manipulate or filter files. Using Drag and Drop, the Local File Manager provides an easy way of inserting links into your documents. The Local File Manager was designed to aid with the file manipulation required of larger Websites.

Websites

Websites are collections of HTML documents. Using HotDog to create a Website on your local computer will mean that when it comes time to upload to the Internet, one click is all it will take to transfer your work. Using Websites greatly reduces the amount of organization required to get you up and running on the Internet.

Macro Editor

The Macro Editor is used to insert text and tags into your document. Its key advantage is that it can insert text before and after selected text in the document.

Supertoolz

For quick access to your Supertoolz, the Supertoolz Manager can be useful. Just double click on any of the Supertoolz to activate them. Remember, you will need to first install some Supertoolz.

Extended Characters

If you need to insert foreign or unusual characters such as © or ™, use the Extended Character Manager. Just drag and drop the characters you need directly into your document for the correct HTML code to be inserted.

Internet Files

Using simple Drag and Drop you can easily transfer files to and from your server. Uploading and downloading files is as simple as dragging them to and from the Local File Manager. The Internet Files Manager also contains the “Add New Internet Connection” Wizard. The Internet File Manager was created as an easy way to quickly upload and download files, while still inside HotDog.

HTML Tags

HotDog comes with a complete listing of all the HTML tags we could find - plus a few more. The HTML Tag Manager is used to define different colors for different tags, create shortcut keys for different tags and for defining your own tags.

MultiLine Clipboard

We found that it is very useful to be able to drop commonly used text straight into our documents. The MultiLine Clipboard is simply a clipboard with unlimited capacity. It is useful for storing HTML code for commonly used images and colors.

Internet Explorer Favorites and Netscape Bookmarks

If you want to insert a link to one of your favorite Websites, just drag the bookmarked link into your web document and it will be automatically inserted.

SuperToolz

The development of SuperToolz is what makes HotDog so flexible. SuperToolz are plug-in programs designed to work specifically in conjunction with HotDog.

SuperToolz allow for the unlimited extension of HotDog's functionality, while at the same time giving users the ability to pick and choose the functionality they want to include in HotDog. Every SuperTool is downloaded, purchased (if not already free), maintained and updated via the Internet from within HotDog itself.

With one click, HotDog will automatically download and install chosen SuperToolz or SuperToolz updates, ready to use immediately and with no fuss.

NOTE

As well as plug-in programs, HotDog can even upgrade itself using the SuperTool architecture. This includes shell upgrades (HotDog 6 to HotDog 6) but also HTML syntax files. Even the AutoDownloader itself can be upgraded. Over the last six months, Sausage Software has released 16 SuperToolz, not including upgrades and updates to already existing SuperToolz.

Finding and Installing SuperToolz

  • On the SuperToolz menu, choose AutoDownloader.

Free Sausage SuperToolz

  • LookSmart Smartlinks SuperTool

  • Reptile

  • The SilverThingy

  • SMIL Composer

Currently Available SuperToolz

  • HotDog Express

  • Bandwidth Buster

  • Channel Wizard

  • Gif Movie Gear

  • ICQ Communication Panel Wizard

  • Image Mapper

  • ImageLab

  • JackHammer 2

  • Java Animator SuperTool

  • Java Text Effects SuperTool

  • JavaScript Tools

  • LinkExchange Add Banner Wizard

  • Multi-File Find and Replace

  • Real Audio/Video Content Wizard

  • SafeSurf Web Content Rating Wizard

  • Table Editor

  • Web Downloader

Third Party SuperToolz

  • 1st Java Navigator 5.0

  • Balitools

  • Intel® Indeo® Media Kit

  • Intel® Web Design Effects

  • Xara 3D


Credits and Copyright

Copyright Notice

Copyright © 2000 Sausage Software (Holdings) Pty Ltd. All Rights Reserved.

The information and graphics contained within these Help files remain the property of Sausage Software (Holdings) Pty Ltd. HotDog and Sausage Software are trademarks of Sausage Software (Holdings) Pty Ltd.

"The Sentry Spelling-Checker Engine Copyright © 1996 Wintertree Software Inc."

"Danish Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

"Dutch Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

"Finnish Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

"French Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"German Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"Italian Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"Brazilian Portuguese Lexicon Copyright (c) 1997 Wintertree Software Inc."

"Spanish Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"Swedish Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

Credits

Netscape Communications Corporation has not authorized, sponsored, or endorsed, or approved this help file and is not responsible for its content. Netscape is a trademark and trade name of Netscape Communications Corporation.

Microsoft has not authorized, sponsored, or endorsed, or approved this help file and is not responsible for its content. Microsoft, Windows, Windows NT, Windows 95, Excel, Internet Explorer, MS Internet Explorer are trademarks and trade names of Microsoft.

All the pages in the combined Sausage Software and Web Design Group HTML Reference are copyright of Liam Quinn and Sausage Software, 1998.

And thanks to everyone who gave us feedback on HotDog.


Preface

1 - Preface to The Evaluator's Guide

Product Support

This guide has been designed to help you understand the product design goals for HotDog Professional 6 and to assist you in the evaluation process during your free thirty-day trial period. The conventions and features discussed within this guide are documented in greater detail in the rest of the help files supplied with the product.

For answers to our most frequently asked questions (FAQs), visit the support section of our website at:

http://www.sausagetools.com/support/

You can also contact our friendly and helpful Customer Support Team from here, if you should have any queries related to our fabulous Sausage product range that are not covered in our FAQs.

To participate in (or view) informative discussions related to HTML and website design, visit our regularly monitored Sausage Island Web Forums at:

http://www.sausagetools.com/forum/

System Requirements

The system requirements for HotDog Professional 6 are:

  • IBM-Compatible PC Pentium (Recommended: Pentium II or better)

  • Windows 95, 98 or NT 4.0

  • Minimum 32 MB RAM (Recommended: 64 MB RAM)

Obtaining HotDog Pro

All Sausage Software products are sold and distributed online. We do not ship any physical goods with your purchase such as a manual or CD. When you purchase from us, you are purchasing registration details (so that you may register software that must be downloaded and installed) with unlimited technical support from our friendly staff.

To promote our customers' enjoyment of their software, we also provide numerous online resources. If you would like more information about these then just visit our FAQs.

All current Sausage products can be downloaded from the Software section of our website at:

http://www.sausagetools.com/software/

Sausage products can be purchased from our secure online store at:

https://secure.sausage.com/

All current prices can be found at our secure online store.

Evaluation Section: You are viewing Section 1. 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |


Menu

2 - Menu

1 - Preface

  • Product Support

  • System Requirements

  • Obtaining HotDog Pro

2 - Menu

3 - Welcome

  • What is HotDog Professional 6?

  • What's New in HotDog Professional 6?

4 - Design Focus

5 - Features: Overview

  • HotDog Shell

  • Editor

  • Functions

  • Resources

6 - Features: Editor

7 - Features: Functions

8 - Features: Resources

9 - Conclusion

Evaluation Section: | 1 You are viewing Section 2. 3 | 4 | 5 | 6 | 7 | 8 | 9 |


Welcome

3 - Welcome

What is HotDog Professional 6? Speed, Precision, Control - The Gun Coder's Solution!

Welcome to HotDog Professional 6.

Affectionately known as HotDog Pro, this wonderful program is both an advanced HTML editor and a brilliant website development tool. HotDog Pro is designed for webmasters who not only want complete control and flexibility in website development, but also great efficiency and ease-of-use.

Since the creation of the World Wide Web in 1989, Sausage Software has been at the forefront of companies responsible for extending the simple foundations of the Web with new technologies. This has enabled computer users all over the world to create a new class of sophisticated and revolutionary websites. When the original version of HotDog was released in June of 1995, it was the first HTML editor of its kind.

With Sausage's responsive and innovative approach to meeting the needs and wants of webmasters, HotDog has only become better and better with time. Over the last five years, HotDog has been downloaded more than any other HTML editor on the Internet, with download sites including: CNET, Rocketdownload, Tucows and Sausage.

Today, HotDog Pro is the most powerful and user-friendly text-based HTML editor on the market. Aimed at web enthusiasts and professional webmasters (known at Sausage as Gun Coders), the development of HotDog Pro 6 has been focused on the following design objectives.

  • Low Resource Usage and High Speed

  • Easy and Powerful Editing

  • State-of-the-Art Website Management

  • Quality Assurance Facilities

  • Customizable

  • Extended and Non-Intrusive Help

  • Accessibility Features in Conformance with W3C Accessibility Guidelines

What's New in HotDog Professional 6?

At Sausage we love to stay in tune with what's new and what's cool. Not only is our HotDog Team proactive about researching and developing new technology in consultation with leading webmasters, but many of our wonderful customers are also proactive about providing us with their valuable feedback.

In accordance with the suggestions and requests made to our HotDog Team and on our Sausage Island Discussion Forum, we have enhanced most existing features and developed some great new features within HotDog Pro. Our most significant new developments include:

  • enhanced editor support for all the most popular web coding languages (HTML, CSS, ASP, VBScript, JavaScript);

  • new Navigation Viewer resource panel for quick over-viewing, navigating and editing of webpages (also highlights accessibility and syntax errors);

  • new Cascading Style Sheets resource panel for style sheet integration and editing;

  • new Font and Paragraph Formatting dialogs for easy style formatting within webpages;

  • new Scripts resource panel for adding pre-configured, webpage-enhancing JavaScript functions;

  • new Accessibility Editing dialog for improving webpage accessibility, plus accessibility options incorporated into all relevant dialogs.

A more comprehensive listing of all the new features that have been added to HotDog Pro 6, since the previous version, is available within the program's Help topic New in HotDog Professional 6

To guide you through the evaluation process, the following sections provide you with further details of our design focus followed by an overview of all the main features in HotDog Pro 6, including the new features mentioned here.

Evaluation Section: | 1 | 2 You are viewing Section 3. 4 | 5 | 6 | 7 | 8 | 9 |


Design Focus

4 - Design Focus

Details of Our Design Objectives

Low Resource Usage and High Speed

Our number one priority for the latest version of HotDog Pro was to make it the optimal productivity tool for Gun Coders. HotDog Pro 6 uses on average only 20% of system resources, making it faster and more powerful than comparable sized programs. The program loading time ranges between 3 to 8 seconds (depending on system configuration) and the average document loading time is under a second. The single document interface also allows you to open hundreds of documents with negligible use of resources.

Easy and Powerful Editing

Daunting and complex tasks are easy with the powerful functionality of HotDog Pro 6. Everything you need to efficiently develop spectacular webpages has been provided, including:

  • our renowned HTML Property Sheet that helps you to learn HTML as you edit;

  • code completion to provide a quick and easy way insert your code;

  • the ability to automatically view your changes, both within the program and externally, whilst you edit;

  • the ability to automate repetitive tasks and to create your own template style;

  • easy-to-use wizards and dialogs that make involved tasks a cinch (including image, image thumbnail table, publish field, table, frame, form, website and internet connection wizards);

  • a Multimedia Manager that makes it a simple matter for you to control images, animations and sounds;

  • easy document-navigating features to improve your efficiency;

  • support of all the most popular web coding languages (HTML, CSS, ASP, VBScript, JavaScript);

  • the ability to add useful, pre-configured JavaScript functions to your webpages;

  • the integration of style definitions and cascading style sheets, so that you can effectively control the look and form of all your documents;

State-of-the-Art Website Management

Webmasters have long been demanding a HTML Editor with advanced website management facilities. HotDog Pro 6 plugs the gap with full-featured website management tools that make creating and maintaining large websites both fun and easy. The websites manager includes:

  • the ability to define all website properties and preferences;

  • a powerful file management interface, making it possible to create, add, remove and edit website files within a single view;

  • preserved document states (that is, any bookmarks and collapsed text you create are remembered);

  • a multi-user interface that allows teams of webmasters, working on a local network, to define their website on a shared network drive;

  • the ability to assign and schedule tasks for project management purposes (a task is a formal note that is attached to a document in a website - it contains information about the nature of the task to be completed, due dates, etc.);

  • an internal website browser, allowing you to view and navigate your website as it will appear on the internet, as well as add tasks to any pages that need work;

  • the ability to perform website-wide replace procedures on text, document properties (body tags) and document information (meta tags);

  • an error-checker to verify and edit all links and resources used in your website (entire sites can be checked for broken links and errors corrected across many pages with one action, and external resources, such as image files, are automatically collected and links updated ready for publishing);

  • alterations to backgrounds, new meta tags or text block multi-find and replacements achieved with one action;

  • the ability to easily publish an entire website (or only the changes to your website) both locally and remotely.

For more information about HotDog Pro's Websites manager, read the section on HotDog Pro Resources.

Quality Assurance Facilities

HotDog Pro 6 has been designed so that you can ensure the quality of your websites. Within HotDog Pro 6 we have provided facilities to check and edit the spelling, syntax, links, resources, and accessibility of all your webpages.

As you type, if you make any syntax errors, HotDog Pro 6 will notify you immediately and show you what part of your code is incorrect. You can also specify which syntax files will be recognized in your work. HotDog Pro 6 uses several syntax files to validate any code you create. These syntax files are separated by versions and browser support. This is particularly useful if you want to design your pages so that they are compatible with different browsers. Our HTML Property Sheet also displays the properties and HTML specification of each tag, making it very simple for you to ensure browser compatibility and correctness whilst editing.

Customizable

HotDog Pro 6 has been designed to be both flexible and customizable. To enhance your own HotDog Experience, we have made it possible for you to specify your preferences in all different aspects of website development, including:

  • the appearance and functionality of your environment and editing window;

  • the internal preview (ROVER) and browser settings;

  • dictionaries;

  • the directory, publishing and server settings.

You can also create your own shortcut keys for different tasks, html tags and macros. Toolbars are one of the quickest ways to access functionality in HotDog Pro, so the toolbars in HotDog Pro 6 are completely customizable. With just a few clicks, you can add/remove functions, HTML tags and macros from any toolbar.

Extended and Non-Intrusive Help

We put a lot of thought into the design of the HotDog Shell. When designing each dialog, as well as considering ease-of-use, we aimed to enhance the learning process in a convenient and non-intrusive manner. So, for example, the wizards we have created not only help you to perform involved tasks, but also provide useful tips and diagrams. On each dialog is a Question Button button that you can just click on and drag to the feature on the dialog that you would like information about. Each dialog also contains a Help button that links to extended help. Therefore, not only is the function of a dialog explained, but relevant background information and tutorials are also supplied.

HotDog Pro provides advanced HTML help as well. If you hold your mouse over a tag or attribute, popup help appears giving you a concise description of the tag or attribute. With the assistance of Code Completion and our HTML Property Sheet, learning HTML is easier than ever before.

Accessibility Features in Conformance with W3C Accessibility Guidelines

Accessibility is a vital aspect of good website design. The recently released W3C Accessibility Guidelines outline a set of recommendations on how to make web pages more accessible for people who are physically or mentally impaired or who simply wish to perform faster, non-visual browsing. HotDog Pro 6 comprises a number of new features that help you to ensure that your new and existing websites are accessible to as many people as possible. Features include:

  • Accessibility options available in all relevant dialogs so that you can easily incorporate accessibility into your webpage design.

  • Accessibility error highlighting (and editing) feature in the new HTML Navigation View resource panel.

  • New accessibility dialog that individually lists and allows you to edit all Accessibility errors in the current webpage.

By providing these innovative accessibility features, HotDog Pro allows you to design websites that will assist viewers without graphic display terminals; whose browsers don't support forms or applets; who are visually impaired; who use speech synthesizers; or who have configured their graphical user agents not to display images.

Evaluation Section: | 1 | 2 | 3 You are viewing Section 4. 5 | 6 | 7 | 8 | 9 |


Features: Overview

5 - Features: Overview

The HotDog Shell

HotDog Pro can be conceptualized as having several parts with the HotDog Shell wrapping them all together. The HotDog Shell contains:

  1. The Editor

  2. A Menu and Toolbar System

  3. Resource Panels

The HotDog Shell gives you access to all preferences, functions, resources, online help and access to SuperToolz.

The Editor

Each document in HotDog Pro is opened and edited with the editor. Usually editors are only given brief consideration by users because, by all outward appearances, they appear the same.

The HotDog editor is deceptively powerful. As well as many convenient editing features (such as text collapsing for increased readability and productivity, shortcut key creation for greater speed, word wrapping, accurate line numbering, built-in thesaurus, etc.), the HotDog editor also supports the following great features:

  1. Split-View Editing

  2. Multiple Web Coding Languages

  3. Code Completion and Tooltips

  4. Document Properties and Document Information Formatting

  5. Enhanced Font and Paragraph Formatting, including support of Multi-Lingual Characters and Proportional Fonts

  6. Multimedia Manager

  7. Image Optimization and Processing

  8. Preference Editing

Functions

HotDog Pro Menus and Toolbars

HotDog Pro has been designed so that you can access the functionality within the program as easily as possible:

  • Every HotDog Pro feature is accessible using our eleven-menu system.

  • Editing features can be accessed at the click of a button using our 10 pre-configured toolbars.

  • To tailor HotDog Pro to your own editing style, all toolbars have been designed to be completely customizable. You can create your own toolbars; add/remove functions, HTML tags and macros to any toolbar; hide any toolbar that you don't wish to use or remove it entirely.

  • All toolbars are floating and resizable. By default, each toolbar is displayed just below the menu system, but each toolbar can be moved and re-sized to your individual preference. You can also quickly hide/display your toolbars at any time simply by right-clicking on any currently open toolbar (or selecting Toolbars in the View menu) and selecting the toolbar you wish to hide/display.

The table below displays the different sets of functions in the HotDog Pro menu-toolbar system:

  1. File Functions: Menu and Toolbar

  2. Edit Functions: Menu and Toolbar

  3. InsertFunctions: Menu and Toolbar

  4. View Functions: Menu and Toolbar

  5. Format Functions: Menu and Toolbar

  6. Table Functions: Menu and Toolbar

  7. Frame Functions: Menu and Toolbar

  8. Form Functions: Menu and Toolbar

  9. SuperToolz: Menu and Resource Panel

  10. Window Functions: Menu

  11. Help Functions: Menu

  12. Custom Colors: Toolbar

  13. Navigation Functions: Toolbar and Resource Panel

Resources

As more and more functionality was added to HotDog Pro, we had to look for a way of making all of it easily accessible. Menus are too time-consuming. Toolbars, though ideal for most editing functions, aren't powerful enough for really involved tasks. The Sausage solution was to develop resource panels that are controlled by a Resource Manager.

A resource panel is a floating, re-sizable window that groups similar resources and functionality into the same place. Each resource panel performs a specific set of tasks related to website authoring.

The table below displays all the great resource panels controlled by HotDog Pro's Resource Manager:

  1. Local Files

  2. Internet Files

  3. Websites

  4. HTML Property Sheet

  5. HTML Tags

  6. MultiLine Clipboard

  7. Macro Editor

  8. Cascading Style Sheets

  9. Navigation Viewer

  10. Scripts

  11. Extended Characters

  12. Bookmarks/Favorites

  13. SuperToolz

So that you only use the resources that you need during the website development process, our HotDog Team created 5 different resource panel configurations that you can use:

  • FTP Configuration: This displays the Local Files and Internet Files resource panels.

  • Websites Configuration: This displays the Local Files and Websites resource panels.

  • Tags Configuration: This displays the HTML Property Sheet and HTML Tags resource panels.

  • Macro Configuration: This displays the MultiLine Clipboard and the Macro Editor resource panels.

  • All Resources: This displays all resource panels.

Alternatively, to conform to your own website development style, all resource panels can be opened/closed individually. By default, each resource panel is docked to the left/right of the editing window, but can be moved and re-sized to your individual preference. You can also quickly hide/display your resource panels at any time simply by clicking on Show/Hide Resource Panels Button, located in the View toolbar, and selecting from the drop-down list (arrow to the right of the button) the panel that you wish to hide/display.

Evaluation Section: | 1 | 2 | 3 | 4 You are viewing Section 5. 6 | 7 | 8 | 9 |


Features: Editor

6 - Features: Editor

Heaps of Editor Functionality

Split-View Editing

HotDog Pro has a useful 3-view editing feature. This means whilst editing you can:

  1. view the HTML code of the document you are editing in the editing window;

  2. preview your webpage using live document rendering in the ROVER view (Real-time Output ViewER);

  3. view the HTML code of another open document (or the same document!) in an additional editing window simply by clicking Button to Open a Document in a Second Window..

The additional editing window makes comparing the code in different documents or within the same document a simple matter. Copying and pasting between different documents or within the same document is also easy.

Buttons, URL field and ruler in the ROVER view.

The ROVER view is HotDog Pro's own internal browser, which means that as you edit you can preview the way your webpage would actually look on the internet. The more common WYSIWYG (What You See Is What You Get) approach in many webpage programs tend to hide the HTML code from authors, leading them to believe that what they see is what their audience will see, which is often not the case. Professional webmasters know that live document rendering gives them full control over their source code while still providing them with an authentic visual representation of their web page in real-time.

You even have the option of turning ROVER off, and previewing your webpages externally - simply click on Preview Button in the File toolbar and select the browser of your choice. This is especially useful for ensuring compatibility between different browsers. (HotDog Pro searches for and automatically installs any external browsers it finds on your system when you start HotDog Pro for the first time.)

Multiple Web Coding Languages

Gun Coders don’t just use HTML these days. As such, HotDog Pro 6 provides native text editing support for the most popularly used languages in modern web design. In particular, the HotDog editor supports:

  • the ability to create separate syntax highlighting or coloring schemes for HTML, CSS, ASP, VBScript, JavaScript.

  • code completion support for HTML, CSS, ASP, VBScript, JavaScript;

  • syntax validation and error checking for HTML, CSS, ASP, VBScript, JavaScript during editing.

Code Completion and Tooltips

So that you can edit your code as quickly and efficiently as possible, HotDog Pro can provides you with code completion and tooltip help for colors, images, tags and syntax errors .

Code completion is a useful tool that gives you a quick way of inserting tags and attributes. Because HotDog knows the entire HTML, CSS, ASP, JavaScript and VBScript specifications, it can present you with all the possible attributes for each tag while you edit and, where possible, the values that are associated with each tag.

By placing your cursor over different parts of your code, popup information (tooltips) appears about that part of the code and will even let you know if there is any unrecognized/incorrect code. By moving your cursor over color codes, an image of the color appears so that you know exactly what color you have specified in your document. This is also the case with images - by placing your cursor over your image code a small version of the image appears so that you know exactly which image has been inserted into your code.

Document Properties and Document Information Formatting

So that you can optimize your webpages for the Internet, the HotDog editor allows you to specify the properties and information of each individual document from the Format toolbar. The Document Properties dialog allows you to select a style sheet, change the colors of the text and links, add a background color or background image. You can also see how large your document is (including images) and how long it would take to download under different modem speeds.

The Document Information dialog provides enhanced support for meta tags, automatic repetition of keywords in upper and lower case, keyword file saving for later use, making it easy to optimize your webpages for inclusion in search engines.

Enhanced Font and Paragraph Formatting, including support of Multi-Lingual Characters and Proportional Fonts

In addition to cascading style sheet integration, HotDog Pro now gives you the power of using style tags or inline styles to format your characters and paragraphs. The new Font and Paragraph dialogs allow you to specify all the style properties of your fonts, paragraphs, lists, borders and backgrounds in such a manner that controlling the appearance of your webpages easier than ever before. For greater flexibility, HotDog Pro also supports multi-lingual characters and all proportional fonts.

Multimedia Manager

Webmasters rapidly collect large amounts of media files that they use throughout their sites. The Multimedia Manager is a particularly useful tool that brings HotDog-based control to large groups of multimedia. Using the Multimedia Manager you can quickly preview a directory of images, animations or sounds and insert them into your webpage. This is useful when you have to find a single image or sound among an entire directory of them. An additional thumbnail component guides you through the involved process of creating and inserting an image thumbnail table

Image Optimization and Processing

Because a visitor has to download every one of your images to correctly view your webpage, image optimization and processing is of paramount importance. HotDog Pro allows you to edit and optimize all your images for the web, including :

  • previewing all images;

  • checking images for prospective download times;

  • converting images to GIF or JPEG;

  • making side-by-side comparison of changes between old and new images

Preference Editing

HotDog Pro allows you to specify your preferences in all aspects of using the program - simply select Preferences on the Edit menu. In relation to editing you can specify:

  • your preferred ROVER settings

  • the appearance and functionality of the HotDog editing window

  • syntax filters rules

  • syntax validation colors

  • syntax and tag coloring/highlighting

  • recognized file types

  • the locations of the directories HotDog uses

  • the browsers in your browser list

  • the dictionaries used

Evaluation Section: | 1 | 2 | 3 | 4 | 5 You are viewing Section 6. 7 | 8 | 9 |


Features: Functions

7 - Features: Functions

Powerful Menu and Toolbar System

File

Handling documents is a regular part of website development. The File functions within HotDog Pro ensure that this is done as efficiently as possible and include such features as:

  • creating your own HotDog template style;

  • the easy opening, saving and closing of individual documents, all documents in a website or all documents as specified;

  • saving documents remotely;

  • saving documents as templates, text files, HTML, CSS, ASP, VBScript, JavaScript and PHP documents;

  • opening templates, text files, HTML, CSS, ASP, VBScript, JavaScript and PHP documents;

  • previewing documents;

  • specifying printer settings and printing;

  • updating your version of HotDog Pro by taking you to Sausage's own Autodownload site.

Edit

The ability to edit your webpages easily is crucial to productive website development. Within HotDog Pro we have created an enormous number of features to assist you in this. Among these, the toolbar and menu Edit functions cover the most basic features, including:

  • undoing/redoing up to 300 actions;

  • cutting, clearing and copying;

  • pasting, including pasting into a generated table and smart pasting;

  • finding and replacing;

  • selecting;

  • spell checking and word suggestions using HotDog Pro's built-in thesaurus;

  • Accessibility checking dialog that checks your current HTML page and provides a list of Accessibility errors. Double-clicking any error will open the appropriate HotDog dialog to allow you to quickly and easily add the accessibility fields missing from the selected HTML element.

  • editing all your HotDog preferences, including the appearance and functionality of your environment and editing window; the internal preview (ROVER) and browser settings; dictionaries; and your directory, publishing and server settings.

Insert

During webpage development, authors frequently need to insert a variety of objects into their documents. The Insert functions within HotDog Pro bring up dialogs that help you to quickly and correctly insert objects into your webpages. From the Insert menu/toolbar you can call up the following dialogs and wizards:

  • Insert Image: This dialog allows you to specify the image you wish to insert, specify advanced image properties (including Accessibility information), or run the Image Wizard (for beginner's who want you step-by-step guide to inserting images properly).

  • Insert Hyperlink: This dialog makes it easy for you to create anchors/links within your document, specify targets and frame targets as well as including Accessibility information.

  • Insert Target ID: This dialog allows you to specify anchors or jump points within your document, so that you can link to different parts of your document from any hyperlink.

  • Insert Horizontal Rule: This dialog allows you to specify the properties of a horizontal rule that you wish to insert into your document.

  • Insert List and Insert Definition List: These dialogs allow you to specify the properties of lists that you wish to insert into your document.

  • Embed Item: Using this dialog, you can specify the object that you wish to embed and specify the object dimensions.

  • Insert Image Thumbnail Table: This wizard guides you step-by-step through the involved process of creating and inserting an image thumbnail table. Using this wizard allows you to quickly browse directories for images, animations and sounds.

  • Add Publish Field: This useful little wizard shows you how to add publish fields to your webpages or templates.

The Insert functions also allow you to easily insert Comment tags, add special fields (such as the date/time) and insert a HotDog link into your webpages.

View

Every webmaster knows that it's important to be able specify the tools that you need whilst developing your websites and also to remove any unnecessary tools so that you can prevent clutter. The View functions within HotDog Pro allow you to do all this, including:

  • selecting resource panels to open/close, including opening/closing pre-set resource panel configurations;

  • customizing toolbars and restoring the toolbar default settings;

  • running the Multimedia Manager, which allows you to preview and insert media files as well as run the Insert Image Thumbnail wizard (this wizard guides you step-by-step through the involved process of creating and inserting an image thumbnail table);

  • viewing all fixed and user-defined function, tag and macro shortcuts ;

  • hiding/displaying ROVER and the ROVER ruler.

Format

The ability to format your documents is pivotal to website optimization. The Format functions within HotDog Pro have been designed so that you can optimize your webpages both creatively and productively. They include:

  • selecting your own color palette and customizing colors;

  • quick insertion of color code specification into your webpage;

  • formatting document properties - including selecting a style sheet, changing the colors of the text and links, adding a background color or background image and determining the size of your document (including images) and how long it would take to download under different modem speeds;

  • formatting document information - including specifying meta tags, keyword properties, author/description information, document distribution and redirection;

  • using DHTML to dynamically animate objects on your webpage;

  • character and paragraph formatting;

  • converting absolute addresses to relative addresses (and vice versa) simply by selecting the URL you wish to convert;

  • removing carriage returns and stripping tags within documents;

  • file format, extended character, letter casing, table and list conversions;

  • replacing backslashes with forward slashes in your code - that is, replacing \ with /;

  • calculating image dimensions;

  • publishing.

Table

Tables are used in almost every well-designed webpage that you will come across today. The Table functions within HotDog Pro make using tables in your webpages simple and include:

  • the Table Wizard that makes creating complex tables a cinch;

  • a Quick Table feature that makes it easy for you to quickly create tables;

  • table, row and data cell code insertion.

Frame

Frames are a useful way of presenting toolbars on your webpages. The Frame functions within HotDog Pro include:

  • the Frame Wizard that guides you through the often confusing process of creating webpage frames (includes Accessibility features);

  • inserting frameset, frame and noframes code.

Form

Forms are used when authors want specific information from visitors to their website. The Form functions within HotDog Pro include:

  • the Form Wizard that enables you to construct forms easily;

  • quick insertion of form elements into your webpage, including checkboxes; textboxes; file elements; hidden and password fields; radio, push, reset and submit buttons; text areas, lists and images.

SuperToolz

SuperToolz Menu

The development of SuperToolz is what makes HotDog Pro so flexible. SuperToolz are plug-in programs that you can use to work in conjunction with HotDog Pro. SuperToolz allow for an unlimited extension of HotDog's functionality, while at the same time giving users the ability to pick and choose the functionality they want to include in HotDog Pro.

You can either add your own programs to use with HotDog Pro (just select Create SuperToolz... in the menu) or you can use one of the fantastic SuperToolz created By Sausage.

Sausage Software provides 24 supertoolz; 4 are freely available to all customers, 6 are third party SuperToolz (that is, they are developed and supported by other companies) and 14 regular Sausage SuperToolz. Seventeen of our supertoolz are included in our great Supertoolz Value Pack. For your convenience, every Sausage SuperTool can be downloaded, purchased (if not free), maintained and updated via the Internet from within HotDog Pro.

Simply by selecting Download SuperToolz... in the menu, HotDog Pro will take you to our Autodownloader so that you can download and install your chosen SuperToolz or SuperToolz updates, ready to use immediately and with no fuss. The AutoDownloader helps you keep in contact with Sausage Software and lets us give you the latest updates on the software we make. As well as plug-in programs, HotDog can even upgrade itself (if the upgrade has been released) using the SuperTool architecture. This includes shell upgrades and HTML syntax files. Even the AutoDownloader itself can be upgraded. When you start the AutoDownloader, your default Internet Browser is started, loading the Autdownloader webpage.

The Sausage SuperToolz include website design utilities, image manipulation tools, animation/special effects, video/audio tools, website enhancement tools, download utilities and search engine tools. The following Resources section provides brief information about each SuperTool.

Alternatively, you can find more information about each SuperTool by pointing your browser to:

http://www.sausagetools.com/supertoolz/

and selecting the specific SuperTool you're interested in for further information. With regards to specific help, you can usually press F1 or find a help button within the program to provide specific information.

Window

Window Menu

The Window menu within HotDog Pro makes it easy for you to switch between open documents in either of your editing windows.

Help

Help Menu

With just a click, the HotDog Help menu lets you:

  • browse the structured contents of the comprehensive HotDog Pro help;

  • perform index and keyword searches in the help files;

  • access this Evaluator's Guide so that you can assess HotDog Professional 6 for your own needs;

  • display cascading style sheet help;

  • read the HotDog Overview;

  • display a summary of useful keyboard shortcuts;

  • connect to our regularly-monitored, online Sausage Island Web Forums, so that you can view or participate in informative discussions related to HTML and website design;

  • connect to useful Internet sites;

  • view your license/registration details;

  • view the exact name and version of your HotDog Pro or the HotDog credits and copyright information.

Custom Colors

Custom Colors Toolbar

Similar to the Quick Color button in the Format toolbar, the Custom Colors toolbar allows you to quickly insert common color code specifications into your webpage, with the added advantage that you can more immediately view each color.

Navigation

Quick document-navigation improves your the efficiency and productivity of website development. The Navigation toolbar complements HotDog Pro's new Navigation Viewer resource panel. Within the document that you're editing, the Navigation toolbar allows you to quickly:

  • navigate to bookmarks;

  • navigate to selected line numbers;

  • find matching characters;

  • go to the top, bottom, head or body of your document;

  • go to the previous/next tag;

  • go to the previous/next error.

Evaluation Section: | 1 | 2 | 3 | 4 | 5 | 6 You are viewing Section 7. 8 | 9 |


Features: Resources

8 - Features: Resources

Great Resource Management

Local Files and Internet Files

The Local Files manager was designed to aid with the file manipulation required of larger websites and is like your own Windows Explorer™ within HotDog. You can use the Local File Manager to manipulate or filter files, run the Multimedia Manager and Insert Image Thumbnail Wizard. Using simple drag-and-drop, the Local File Manager provides an easy way of inserting links into your documents.

With the Internet Files manager, you can easily upload and download files to and from your server within HotDog Pro. Some of the features of the Internet File manager include remote creation and deletion of directories on your server. Just right-click over your server to create, rename or delete directories.

The Internet Files Manager also contains the Internet Site Wizard, which takes you step-by-step through the process of setting up a server connection.

Websites

Websites are collections of HTML documents. Using HotDog to create a website on your local computer means that when it comes time to upload to the Internet, one click is all it will take to transfer all your documents. Using the Websites manager greatly reduces the amount of organization required to get you up and running on the Internet.

Keeping all your HTML and associated files together can be difficult. Using the HotDog Websites manager is an easy way to group files (belonging to a particular website) together.

By using the Website Wizard, you can quickly and easily define your own websites. With no proprietary web servers necessary, you can use HotDog Pro to define any file structure as a website and perform site-wide editing functions on all of those files. When you upload a website to the Internet, all files in that website are uploaded along with it.

HotDog websites also supports a complete multi-user environment with complete file locking and task management facilities. All site changes are updated on the fly on all users' machines in a networked environment. All basic functionality required of multi-user support has been included. For example, HotDog Pro will detect two users trying to edit the same file at once and will send a warning.

The true versatility of HotDog websites is that they don't tie you down to any system or program. Any group of HTML documents can be made into a HotDog website and can be used and edited by other software. While using HotDog websites you gain the benefits of many features. Some of these great features are discussed in the Design Focus.

HTML Property Sheet and HTML Tags

The HTML Property Sheet helps you code HTML. It contains all tags and attributes used by the major browsers, Netscape and Microsoft Internet Explorer. For the user who wants their webpages to look great in every browser, the HTML Property Sheet presents the tags and their attributes to you in a sorted list. As you type, it continually updates you as to the attributes available in each tag.

The HTML Property Sheet was designed because it has become clear that a professional web designer needs to know every bit of information about every tag/attribute he or she is using, including which browser supports which tag or attribute. The result is that you can easily determine which attributes to use in which tag to optimize the look of your webpage for the most viewers.

If you need to define custom tags, HotDog will automatically add them to the HTML Property Sheet for you. The HTML Property Sheet also speeds up your editing. Tags are inserted into your document simply by double-clicking on them in the list of Available Tags, in the top panel of the HTML Property Sheet. For each tag selected, the matching list of attributes is displayed and can be added in the same way.

However, the HTML Property Sheet can help you with more than this. All attributes of each tag are listed by the browsers that support them. So, if you want to avoid attributes particular to certain browsers, it is easy to do so. Essentially, the guesswork is taken out of how your webpage will look under different browsers. In conjunction with Code Completion, you can now create documents faster than ever before.

For the beginner, the HTML Property Sheet offers a fun and easy way of experimenting - unfamiliar with a tag or attribute? Just use the top panel of the Property Sheet to add code to your document and see how it affects your webpage. Also, every tag and every attribute has help that is displayed in the bottom panel of the HTML Property Sheet. With this sort of practice, it will only be a short time before you become familiar with the entire HTML language.

HotDog Pro also comes with a complete listing of all HTML tags we could find - plus a few more. The HTML Tags resource panel is used to define different colors for different tags, create shortcut keys for different tags and for defining your own tags. This resource panel gives you an easy way to insert HTML tags into your web documents. However, the HTML Tags resource panel also comes with some powerful features. For example, different browsers support different tags. The HTML Tags resource panel can color tags that are browser dependent a different color to your standard tags. This means you can easily spot tags that may cause trouble for visitors to your site. Furthermore, you can define your own tags and give them their own color! Each HTML tag can be assigned its own shortcut key. This way you can significantly speed up the editing process.

MultiLine Clipboard and Macro Editor

Using the MultiLine Clipboard and Macro Editor takes the repetitiveness out of webpage creation.

When working with a few documents, it is convenient to be able to store multiple portions of different text and insert commonly used text straight into documents. The MultiLine Clipboard is a floating clipboard that can store up to 100 sections of text and HTML code of commonly used images and colors. Just drag in any text/code you want to save and drag out (or double-click on) any that you want to paste into your document. All the clipboard sections can also be easily exported to HotDog macros.

The Macro Editor is used to easily insert commonly used tags and text into your documents. For example, a simple table may form part of your logo. Just make this table a macro, and then you need only double-click on the macro, to insert your table. Macros can also be added to your toolbars, for ease of use.

A key advantage of using macros is that you can specify text to be inserted before and after selected text in the document. Perhaps you just have a common font effect you want at your fingertips. Using the Macro Editor, you can build your own tags. Furthermore, you can have these tags automatically wrap around highlighted text when you insert them.

Cascading Style Sheets

The Cascading Style Sheets resource panel groups your style sheets together and lets you easily import, create, edit and apply styles and style sheets (using a simple graphical interface) as well as organize your styles between different directories. The Apply Style Sheet wizard makes the involved process of linking styles to individual documents, entire websites, entire directories or all open documents a simple matter.

You can also effectively control the look and form of your documents using HotDog Pro's new Font and Paragraph formatting dialogs.

Navigation Viewer

The structure of a webpage is important. High-end HTML documents often contain thousands of lines of code. Gun Coders need ways to quickly open large text documents and quickly locate the code they want to edit. The Navigation Viewer is used to help you navigate through your document, correcting errors and describing structure.

The panel in the Navigation Viewer displays your currently webpage hierarchically as a structured tree view, which can be filtered to show all tags, specific tag types or just major HTML objects. That is, it displays how each of the tags are nested in your HTML document, allowing you to see how your pages are structured.

Structure is important from the point of view of accessibility. Good webpage structure helps you to create ordered content and makes your webpage more accessible for your viewers and to other authors. Having an accessible webpage allows all users the ability to easily navigate your webpage.

  • When you click on a tag in the Navigation Viewer, HotDog automatically jumps to that tag in the editor. Double-clicking on a tag will select all content between the specified opening and closing tags.

  • Right-clicking any tree item will offer options to select or collapse the current tag in the document. Double-clicking an item in the tree view will open its corresponding dialog (if one is available) with all current attributes ready for quick editing.

  • You can also limit the tags displayed in the navigation viewer and use the Navigation Toolbar to help you navigate.

  • All Accessibility errors are displayed at a glance in the HTML Navigation View. Double-clicking any item in the tree view will open the appropriate HotDog dialog to add accessibility options.

Scripts

The Scripts resource panel gives you the power of incorporating and editing events and actions to objects on your webpages through the use of pre-configured JavaScript functions (ScriptBits).

  • "Objects" on your webpage are such things as blocks of text, images, links, etc.

  • An "event" is something that occurs when someone viewing your webpage does something to the object.

  • An action is what occurs when the event has taken place.

For example, clicking on a link is an "event" that triggers the "action" of telling the browser to load a new page.

Using the Scripts resource panel, you can now specify these kind of event-action rules to any other objects on your own webpages. Just select the object you wish to add an event-action rule to and away you go!

Extended Characters

The Extended Character resource panel allows you to insert foreign or unusual characters such as © or ™. Simply double-click on the character you want to insert and it’s inserted into HotDog. Easy. Furthermore, you can insert extended characters into your document as is, to make your document more readable. Then, when you go to upload your document, you can convert all characters to HTML at the same time.

Bookmarks/Favorites

HotDog Pro automatically tries to find your Netscape Bookmarks and Internet Explorer Favorites. The Bookmarks/Favorites resource panel allows you to view these so that if you should wish to insert one of your favorite websites as a link to your webpage, you can do so simply by clicking on it from within the resource panel. You can also change which links HotDog Pro displays by clicking the drop-down list at the top of the resource panel and selecting the link types you want.

SuperToolz

For quick access to your Supertoolz, the Supertoolz resource panel can be useful. Providing the same functions as the SuperToolz menu, you can just double-click on any of the Supertoolz icons to activate them. Remember, you will need to first install some Supertoolz.

Free Sausage SuperToolz Include:

  1. LookSmart Smartlinks SuperTool: Provides your website with the power of Looksmart, the largest Internet directory on the planet, in only minutes.

  2. Reptile: A cool application that lets you create funky backgrounds and easily produce any combination of textures and backgrounds.

  3. The SilverThingy: A cool little desktop organizer that consolidates all your frequently used applications into a single dedicated web development environment.

  4. SMIL Composer: Allows you to easily create synchronized multimedia content for RealSystem G2

Other Currently Available SuperToolz:

  1. Channel Wizard: Creates and configures "add channel" buttons for browsers, and creates the link to the content that will be pushed to them.

  2. ICQ Communication Panel Wizard: Insert ICQ Communications Panels into your webpage easily.

  3. ImageLab: A handy and quick image manipulation tool. If you have a clip art collection it is the perfect tool for manipulating your images and optimizing them for your website.

  4. Image Mapper: A tool to create client-side image maps for your webpages.

  5. JackHammer: Get access to busy Web and FTP servers.

  6. JavaScript Tools: Used to add JavaScript to your HTML documents. Includes drop-down lists, clocks, timers, animated buttons, search utility and popup window scripts.

  7. Multi File Find and Replace: Lets you find and replace text through multiple documents.

  8. Real Audio/Video Content Wizard: Convert WAV files to RealAudio files, convert AVIs to RealVideo, create RealMedia metafiles and insert RealPlayer plug-ins into your webpages.

  9. SafeSurf Web Content Rating Wizard: Rate the content of your webpage using the SafeSurf Rating Standard.

  10. Table Editor: This powerful table editor helps you creates complex tables easily.

  11. Web Downloader: Download websites to your local hard drive.

  12. Java Text Effects SuperTool: Allows you to create crazy Java-based text effects in your webpages.

  13. Java Animator SuperTool: A tool that lets you create and insert Java animations (moving graphics) into your webpages.

Third Party SuperToolz:

  1. 1st Java Navigator 5.0: Works just like a customizable File Manager and Filofax for a website or intranet.

  2. Balitools: Create Java applets without learning Java! Great for interactive forms and surveys.

  3. Gif Movie Gear: Great professional tool for animating GIF images.

  4. Intel® Indeo® Media Kit: Create and view high-quality video content, even with a slow connection.

  5. Intel® Web Design Effects: Create dynamic, realistic, bandwidth friendly animated effects.

  6. Xara 3D: An award winning 3D text generation tool that allows you to generate amazing titles within minutes.

Evaluation Section: | 1 | 2 | 3 | 4 | 5 | 6 | 7 You are viewing Section 8. 9 |


Conclusion

9 - Conclusion

The Sausage Way

We hope you have enjoyed evaluating Hotdog Pro 6 as much as we've enjoyed producing this wonderful program for you. Feedback and constructive criticism are very important to us, as we are constantly trying to improve our products and services. If you have suggestions on how we can improve this evaluation service, please don't hesitate to contact us.

The Sausage emphasis on Customer Service has also led to an increase of our HotDog family to include the popular website authoring tools, HotDog PageWiz and HotDog Junior. If you would like further information about Sausage Software or any of our Sausage products, just check our website at:

http://www.sausagetools.com/

Thank you for evaluating Sausage products!

Evaluation Section: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 You are viewing Section 9.


Create a New Internet Connection

Introduction

The Internet Site Wizard guides you through the process of setting up the server address required to create an Internet Connection. Your server is the computer used to display your webpages to other people on the Internet. Once you have defined this address, HotDog creates an icon for your server in the Internet Files Manager. This lets you easily upload and download files. Just double-click on the server icon to create an Internet connection.

What Do You Want To Do?

Start Internet Site Wizard.

Add a New Internet Connection.

Edit the Details of a Current Internet Connection.

See the Beginners Guide to Publishing (Tutorial).


Start the Create New Internet Connection Wizard

Internet Site Wizard

Starting the Internet Site Wizard

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select Internet Files.

  3. Click the [image] Add New Connection button, near the top left of the Internet Files Manager.


Add a New Internet Connection

Step-by-Step Instructions

First, start the Internet Site Wizard:

  1. On the View menu, select the Resource Manager submenu.

  2. On the Resource Manager submenu, select Internet Files.

  3. Click the [image] Add New Connection button, near the top left of the Internet Files Manager.

Page 1.

Enter the name of your server. This name should be something meaningful, to remind you which server you are using.

Enter the server address. The Server is the computer that you connect to when you want to browse the Internet; it also displays your web pages to anyone who visits your Website. For example, Elise might enter: www.woodnet.com

Page 2.

Enter your Login name. Your login name is given to you by your ISP (Internet Service Provider- the company that gets you connected). The Login name and password identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

Enter your Password. Your password is also provided by your ISP. If you don't know it, you will need to get in contact with them. Instructions on how to do this are provided in the tutorial described below.

Advanced Options.

  • Your remote directory name is the directory on your server used to store your HTML files.

  • The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

  • The Time Out time determines how long HotDog tries to log on to your server.

  • The Keep Connection Alive option keeps the connection to your server active, even when you are not uploading or downloading any data. You probably wouldn’t want this option if your Internet connection is pay per minute.

Concluding Notes

Well done. Your server details have been entered. If you have trouble connecting to the Internet, or you are unsure of some of the terms used here, have a look at the Beginners Guide to Uploading.


Edit the Details of a Current Internet Connection

Step-by-Step Instructions

First open the Internet Files manager:

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, click on Internet Files.

Under the server list at the top of the Internet Files Manager, right-click on the server connection you want to edit.

  • Select Properties

In the Internet Server Properties dialog, make any changes you need and click OK to save any changes.

Help on each of the properties in the Internet Server Properties dialog.


Internet Connection Properties

Internet Connection Properties.

Server Name

Enter the name of your server. This name should be something meaningful, to remind you which server you are using.

Sever Address

Enter the server address. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your Website. For example, a server address might be: www.woodnet.com

Login

Your login name is given to you by your ISP (Internet Service Provider- the company that gets you connected). Your login name and password uniquely identify who you are when it comes to uploading your work. ISPs don't want just anyone uploading to their Server!

Password

Enter your Password. Your password is provided by your ISP.

Default Directory

Your server looks in this directory to find your webpages when a visitor wants to view them. The usual directory is public_html or www. Your ISP should have told you the name of this directory.

Port Number

The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

Time-out

The Time Out time determines how long HotDog tries to log on to your server.

Keep Connection Active

The Keep Connection Alive option keeps the connection to your server active, even when you are not uploading or downloading any data. You may not want this option if your Internet connection is pay per minute.


FTP Server Properties

Server Name

Enter the name of your server. This name should be something meaningful, to remind you which server you are using.

Sever Address

Enter the server address. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your Website. For example, a server address might be: www.woodnet.com

Login

Your login name is given to you by your ISP (Internet Service Provider - the company that gets you connected). Your login name and password uniquely identify whom you are when it comes to uploading your work. ISPs don't want just anyone uploading to their Server!

Password

Enter your Password. Your password is provided by your ISP.

Default Directory

This is the directory in which your server looks to try to find your webpages when a visitor wants to view them. The usual directory is public_html or www. Your ISP should have told you the name of this directory.

Port Number

The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

Time-out

The Time Out time determines how long HotDog tries to log on to your server.

Keep Connection Alive

The Keep Connection Alive option keeps the connection to your server active, even when you are not uploading or downloading any data. You probably wouldn't want this option if your Internet connection were pay-per-minute.


Select/Create A Remote Server

Introduction

The Remote Server window in the Internet Files Manager (the top-most window in the resource panel) is used to let you select a server directory or create a connection to the Internet.

Connecting to an Existing Server

  1. In the Remote Server window double-click on the server you want to select. This will open a connection to that server.

  2. Double-click on the directory you want to open.

To Create a New Server

Double-click the Add New Site icon. This opens the Internet Site Wizard.


Upload or Download Files

Step-by-Step Directions

Open both the Local Files Manager and the Internet Files Manager. Use the directory section of each manager (upper panel) to navigate to the directory you want to copy from and download/upload to.

Uploading Files

From the file section of the Local Files Manager, drag the files you want to upload to the files section of the Internet File Manager.

Downloading Files

From the files section of the Internet Files Manager, drag the files you want to the files section of the Local Files Manager.

Refreshing the Internet Files Resource Panel

You can refresh the file list in the Internet Files resource panel by simply clicking in the resource panel and then pressing the F5 function key. Alternatively, using the right hand mouse button, click in the pane where files are listed in the Internet Files resource panel, and then select the Refresh option from the context menu that appears.


Editor

The HotDog Editor

Easy and Powerful Editing

Daunting and complex tasks are easy with the powerful functionality of HotDog Pro 6. Everything you need to efficiently develop spectacular webpages has been provided, including:

  • our renowned HTML Property Sheet that helps you to learn HTML as you edit;

  • code completion to provide a quick and easy way insert your code;

  • the ability to automatically view your changes, both within the program and externally, whilst you edit;

  • the ability to automate repetitive tasks and to create your own template style;

  • easy-to-use wizards and dialogs that make involved tasks a cinch (including image, image thumbnail table, publish field, table, frame, form, website and internet connection wizards);

  • a Multimedia Manager that makes it a simple matter for you to control images, animations and sounds;

  • easy document-navigating features to improve your efficiency;

  • support of all the most popular web coding languages (HTML, CSS, ASP, VBScript, JavaScript);

  • the ability to add useful, pre-configured JavaScript functions to your webpages;

  • the integration of style definitions and cascading style sheets, so that you can effectively control the look and form of all your documents.

HotDog Pro 6 has also been designed so that you can ensure the quality of your websites. Within HotDog Pro 6 we have provided facilities to check and edit the spelling, syntax, links, resources, and accessibility of all your webpages.

As you type, if you make any syntax errors, HotDog Pro 6 will notify you immediately and show you what part of your code is incorrect. You can also specify which syntax files will be recognized in your work. HotDog Pro 6 uses several syntax files to validate any code you create. These syntax files are separated by versions and browser support. This is particularly useful if you want to design your pages so that they are compatible with different browsers. Our HTML Property Sheet also displays the properties and HTML specification of each tag, making it very simple for you to ensure browser compatibility and correctness whilst editing.

The Editor

Each document in HotDog Pro is opened and edited with the editor. Usually editors are only given brief consideration by users because, by all outward appearances, they appear the same.

The HotDog editor is deceptively powerful. As well as many convenient editing features (such as text collapsing for increased readability and productivity, shortcut key creation for greater speed, word wrapping, accurate line numbering, built-in thesaurus, etc.), the HotDog editor also supports the following great features:

  1. Split-View Editing

  2. Multiple Web Coding Languages

  3. Code Completion and Tooltips

  4. Document Properties and Document Information Formatting

  5. Enhanced Font and Paragraph Formatting, including support of Multi-Lingual Characters and Proportional Fonts

  6. Multimedia Manager

  7. Image Optimization and Processing

  8. Preference Editing

Split-View Editing

HotDog Pro has a useful 3-view editing feature. This means whilst editing you can:

  1. view the HTML code of the document you are editing in the editing window;

  2. preview your webpage using live document rendering in the ROVER view (Real-time Output ViewER);

  3. view the HTML code of another open document (or the same document!) in an additional editing window simply by clicking Button to Open a Document in a Second Window..

The additional editing window makes comparing the code in different documents or within the same document a simple matter. Copying and pasting between different documents or within the same document is also easy.

Buttons, URL field and ruler in the ROVER view.

The ROVER view is HotDog Pro's own internal browser, which means that as you edit you can preview the way your webpage would actually look on the internet. The more common WYSIWYG (What You See Is What You Get) approach in many webpage programs tend to hide the HTML code from authors, leading them to believe that what they see is what their audience will see, which is often not the case. Professional webmasters know that live document rendering gives them full control over their source code while still providing them with an authentic visual representation of their web page in real-time.

You even have the option of turning ROVER off, and previewing your webpages externally - simply click on Preview Button in the File toolbar and select the browser of your choice. This is especially useful for ensuring compatibility between different browsers. (HotDog Pro searches for and automatically installs any external browsers it finds on your system when you start HotDog Pro for the first time.)

Multiple Web Coding Languages

Gun Coders don’t just use HTML these days. As such, HotDog Pro 6 provides native text editing support for the most popularly used languages in modern web design. In particular, the HotDog editor supports:

  • the ability to create separate syntax highlighting or coloring schemes for HTML, CSS, ASP, VBScript, JavaScript.

  • code completion support for HTML, CSS, ASP, VBScript, JavaScript;

  • syntax validation and error checking for HTML, CSS, ASP, VBScript, JavaScript during editing.

Code Completion and Tooltips

So that you can edit your code as quickly and efficiently as possible, HotDog Pro can provides you with code completion and tooltip help for colors, images, tags and syntax errors .

Code completion is a useful tool that gives you a quick way of inserting tags and attributes. Because HotDog knows the entire HTML, CSS, ASP, JavaScript and VBScript specifications, it can present you with all the possible attributes for each tag while you edit and, where possible, the values that are associated with each tag.

By placing your cursor over different parts of your code, popup information (tooltips) appears about that part of the code and will even let you know if there is any unrecognized/incorrect code. By moving your cursor over color codes, an image of the color appears so that you know exactly what color you have specified in your document. This is also the case with images - by placing your cursor over your image code a small version of the image appears so that you know exactly which image has been inserted into your code.

Document Properties and Document Information Formatting

So that you can optimize your webpages for the Internet, the HotDog editor allows you to specify the properties and information of each individual document from the Format toolbar. The Document Properties dialog allows you to select a style sheet, change the colors of the text and links, add a background color or background image. You can also see how large your document is (including images) and how long it would take to download under different modem speeds.

The Document Information dialog provides enhanced support for meta tags, automatic repetition of keywords in upper and lower case, keyword file saving for later use, making it easy to optimize your webpages for inclusion in search engines.

Enhanced Font and Paragraph Formatting, including support of Multi-Lingual Characters and Proportional Fonts

In addition to cascading style sheet integration, HotDog Pro now gives you the power of using style tags or inline styles to format your characters and paragraphs. The new Font and Paragraph dialogs allow you to specify all the style properties of your fonts, paragraphs, lists, borders and backgrounds in such a manner that controlling the appearance of your webpages easier than ever before. For greater flexibility, HotDog Pro also supports multi-lingual characters and all proportional fonts.

Multimedia Manager

Webmasters rapidly collect large amounts of media files that they use throughout their sites. The Multimedia Manager is a particularly useful tool that brings HotDog-based control to large groups of multimedia. Using the Multimedia Manager you can quickly preview a directory of images, animations or sounds and insert them into your webpage. This is useful when you have to find a single image or sound among an entire directory of them. An additional thumbnail component guides you through the involved process of creating and inserting an image thumbnail table

Image Optimization and Processing

Because a visitor has to download every one of your images to correctly view your webpage, image optimization and processing is of paramount importance. HotDog Pro allows you to edit and optimize all your images for the web, including :

  • previewing all images;

  • checking images for prospective download times;

  • converting images to GIF or JPEG;

  • making side-by-side comparison of changes between old and new images

Preference Editing

HotDog Pro allows you to specify your preferences in all aspects of using the program - simply select Preferences on the Edit menu. In relation to editing you can specify:

  • your preferred ROVER settings

  • the appearance and functionality of the HotDog editing window

  • syntax filters rules

  • syntax validation colors

  • syntax and tag coloring/highlighting

  • recognized file types

  • the locations of the directories HotDog uses

  • the browsers in your browser list

  • the dictionaries used


How To Use the HotDog Editor

Introduction.

Each document in HotDog Pro 6 is opened and edited with the HotDog Editor. Usually editors are only given brief consideration by users because, by all outward appearances, they look the same. However, the HotDog Editor is deceptively powerful. As well as the basic functions (such as word wrapping) listed at the bottom of each document, the HotDog Editor can also collapse text and more. Below are three lists that describe the Editor's functionality:

  • Formatting Text.

  • Editor Functionality.

  • Using the Editor.

Formatting Text.

The links below provide help on formatting your HTML text.

Editing Text.

Applying Character Formatting (font color, size, etc.).

Working with Paragraphs (headings etc.).

Formatting with Lists.

Formatting with Style Sheets

Formatting with Tables

Editor Functionality.

Collapsible Text

The HotDog Editor can collapse text that you have finished editing. For example, after you have completed a table that spans three pages there is no need to continually scroll over your completed work. HotDog lets you simply collapse the table, thus reducing the entire table to one line of code and making editing a lot easier.

Help on collapsing and expanding text.

Bookmarks

Bookmarks are a quick and simple way of marking certain places within your document. Being able to jump from one place to another in your document significantly speeds the editing process.

How to set and jump to bookmarks.

Advanced HTML Help

If you hold your mouse over a tag or attribute, popup help appears to provide you with a short description of the tag or attribute. For example, if you hold the mouse over the BORDER attribute in the TABLE tag, a popup message appears saying: Sets the size, in pixels, of the table border. The HTML Help is best used in conjunction with the HTML Property Sheet.

HTML Property Sheet.

Syntax Validation

As you type, if you make any syntax errors, HotDog will notify you immediately. HotDog usually recognizes what the error is and will tell you what part of your tag is incorrect. HotDog will also describe the full HTML specification of the tag.

How to use syntax validation.

Tag or Attribute Coloring

Changing the color of tags helps you pick out the information you need to find from a jumble of HTML. It is particularly useful when you are trying to study other people’s HTML. For example, if you are interested in image tags, then you can color them green. This way they stand out against all the clutter of surrounding tags. You can also color attributes differently from the tags around them. This mode of editing is useful when you are interested in the attributes and values of a tag.

How to color tags different colors. (Tag Coloring).

How to color the attributes of a tag. (Attribute or Syntax Coloring).

Using the Editor.

Spell Checking

HotDog comes with a spell checking system. To correct a misspelled word, right-click over it to gain a list of 16 suggestions. Slide the mouse down to the word you want to insert and click. Or, to spell check your entire document, start the Spell Checker.

Starting the Spelling Checker.

Following links from within a document

When editing HTML documents we realized how useful it is to open documents referenced from inside your current document. From within the ROVER view of an open document, right-click on a link to another document.

Improved Image Manipulation

One of the problems with HTML and images is that you can't see what the image looks like just by staring at the HTML. HotDog includes mouse-over imaging. That is, if you hold your mouse over an IMG tag, a small thumbnail image of the picture appears. This is a quick way to check which image is which.

If you want to do serious image manipulation - such as file size optimization, right click over the image and select Preview Image. This window displays all of the image properties. To optimize the image, click Convert. There you can choose different file formats; compress your image and more.

Image Manipulation.


File Tabs and Document Options

File Tabs and Document Options

At the bottom of a document in the HotDog editor you will see file tabs representing the files that you currently have open in HotDog, as well as a range of document options for the currently selected file. Using these file tabs and document option buttons you can:

  • navigate between open documents;

  • print, save or close a document;

  • save or close all open documents;

  • re-order the open documents in the editor;

  • toggle code-completion on/off;

  • toggle overwrite/insert text mode;

  • show/hide hidden fields;

  • turn word-wrap on/off;

  • hide or display the document gutter;

  • toggle tag highlighting on/off;

  • toggle syntax highlighting on/off.

File Tab Functions

Using File Tabs To Navigate Between Open Documents

You can navigate between open documents in HotDog by clicking on the document's corresponding tab, located at the bottom of the document you are working on. In the example shown above, document3.html is the currently selected document. You could change to document1.html by clicking on its tab. After clicking on document1.html's tab, the contents of document1.html will be displayed in the editor, ready for editing.

Changing the Order of File Tabs

You can change the order that document tabs appear in at the bottom of the document editing screen by clicking on the tab for a document, holding the mouse button down, and moving the mouse to the position in the tabs where you would like the document tab to appear.

Saving, Printing and Closing Files using the File Tabs

You can access options to save, close or print a document by clicking on the document's tab with the right hand mouse button. The context menu that appears will also provide you with options to save or close all of the currently open documents.

Context menu that appears when right-clicking on the document3.html tab.

Document Options

Showing/Hiding Document Options

If the bottom of your document in HotDog looks like this:

... then your document options are currently hidden. You can display document options by clicking on the [image] button on the left hand side of the line above the file tabs at the bottom of the document.

After doing this you should see option buttons similar to the following:

You can hide the document options again by clicking on the button to the left of the document options:

What the Document Option Buttons Do

Syntax Highlighting toggle button. Clicking on this button toggles syntax highlighting in the document editor.

Tag Highlighting toggle button. Clicking on this button turns tag highlighting on or off.

Gutter toggle button. Clicking on this button hides or displays the document gutter (which displays line numbers, and from which you can set and select bookmarks and collapse/expand lines).

Word Wrap toggle button. Clicking on this button turns word-wrap in the document editor on or off.

Show/Hide Hidden Fields toggle button. By clicking on this button you can cause symbols representing hidden fields such as spaces and carriage returns to display in the document editor. Clicking on the button again hides these special characters.

Overwrite/Insert toggle button. Clicking on this button toggles the overwrite/insert cursor modes within the document editor.

Code Completion toggle button. Clicking on this button will toggle the code completion mode on or off. Code completion will be activated with the settings defined under [Edit][Preferences][Editing Window][Code Completion].

End of Line Type. Clicking on this button will toggle between Windows, Macintosh and UNIX icons. The icon displayed represents how the end-of line markers in the document will be formatted. This feature can be used to format files for upload to Windows, Macintosh and UNIX file servers.


Accessibility

W3C Accessibility Guidelines

Accessibility is a vital aspect of good website design. The recently released W3C Accessibility Guidelines outline a set of recommendations on how to make web pages more accessible for people who are physically or mentally impaired or who simply wish to perform non-visual browsing.

HotDog Pro 6 comprises a number of new functions to help you quickly and easily make your new and existing Web Pages more accessible:

  • New accessibility dialog to list/edit all Accessibility errors in current document.

The new Accessibility Check dialog will check your current HTML page and provide a list of Accessibility Errors. Double clicking any error will open the appropriate HotDog dialog to allow you to quickly and easily add accessibility options to the selected HTML element.

  • On the fly Accessibility checking in HTML Navigation View.

All Accessibility errors are displayed at a glance in the HTML Navigation view. Double-clicking any item in the tree view will open the appropriate HotDog dialog to add accessibility options.

  • All relevant Dialogs have Accessibility options.

Every relevant HotDog dialog now contains an Accessibility button. Toggling this option will open an extra set of Accessibility fields for easy editing.

Using these accessibility options in HotDog Pro will assists viewers:

  • Without graphic display terminals.

  • Whose browsers don't support forms or applets.

  • Who are visually impaired.

  • Who use speech synthesizers.

  • Who have configured their graphical user agents not to display images.

To view the W3C Accessibility Guidelines simply point your browser to the following URL:

http://www.w3.org/TR/ATAG10/

What Do You Want To Do?

Check My Document For Accessibility.

Read About Different Accessibility Attributes.


Checking For Accessibility

Instructions

To check for the accessibility of your document:

  1. On the Edit menu, select Accessibility. This brings up the Accessibility dialog.

  2. In the Accessibility dialog, any tags in your current document that don't contain all the possible accessibility attributes are listed. Do one of the following:

  • Click on an item in the list to take your cursor to the start of the tag, so that you can edit your code directly.

  • Double-click on an item to open the appropriate dialog, so that you can add the missing accessibility attribute this way.

  3. Repeat step 2. for any other items in the list.

  4. Click Refresh if you wish to update your list.

  5. Click OK to return to the editing window.

Note: You can also check the accessibility of your document using the Navigation Viewer.

What Do You Want To Do?

Read About Different Accessibility Attributes.

Learn More About Accessibility.


Accessibility Attributes

Introduction

There are many HTML elements with properties (i.e. attributes) that can be used to make your webpages more accessible. Below is a description of the most common accessibility attributes you will come across when using HotDog. If you would like to learn more about designing for accessibility using HotDog Pro, read the discussion on Accessibility or the Instructions for Checking Accessibility.

ALT

This attribute allows you to provide an alternative text description for the element that can be displayed with non-visual browsers. Alternative text descriptions serve as content when the elements on your document are not rendered normally. This makes your web page more accessible. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

For example, you can include an alternative text description with an image element using:

<IMG SRC="graphics/city_to_narnia_map.gif" ALT="Map to show the quickest way to Narnia from the city. - 4KB">

You can do this using the Insert Image Wizard .

Effective alternate text should generally give the function of the image rather than a description of the image. Also, do not specify meaningless or irrelevant alternate text. Not only will this frustrate users, it will slow down web browsers that must convert text to speech or Braille output. Good alternate text is crucial to the document's accessibility for the significant portion of users who do not load images.

ACCESSKEY

Assigning access keys to the elements in your document allows viewers to navigate your web pages simply by pressing the <ALT> key plus the access key you have specified for each element. This makes your web page more accessible.

An access key is a single character from the document character set. When assigning access keys, make sure to consider the likely input method of your viewers. When your viewer presses the <ALT> key and an access key you have assigned to an element then focus will be given to that element.

For example, you can assign an access key to a link on your webpage:

<A HREF="http://www.sausagetools.com/" ACCESSKEY="B">Click here with your mouse to go to the Sausage Software website. Alternatively, just press <ALT>+<B> to get to this link and then press <ENTER>.</A>

You can do this using the Insert Hyperlink Wizard.

TABINDEX

Assigning tab indices to the elements in your document allows viewers to navigate your web pages by tabbing. This makes your web page more accessible.

Within Hotdog Pro, the Tab Index must be a number between 0 and 501. Navigation proceeds from the element with the lowest tab index value to the element with the highest value. Therefore, the tab index you provide will indicate the position of the element in the tabbing order. The tabbing order may include elements nested within other elements.

For example, you can assign a tab index to a link on your webpage using:

<A HREF="http://www.sausagetools.com/" TABINDEX="4">Click here with your mouse to go to the Sausage Software website. Alternatively, just tab to this link and then press <ENTER>.</A>

You can do this using the Insert Hyperlink Wizard.

LONGDESC

This attribute should be used to provide a long description of an image where this would be useful. For example, a painting, graph, or corporate logo could be given a description so that visually impaired and other text-only users can develop a mental picture of the image:

<IMG SRC="graphics/roses.gif" ALT="Gif Image of Roses - 4KB" LONGDESC="http://www.isp.com/name/roses_image_description.html/">

You can do this using the Insert Image Wizard .

This attribute is also available in the Frame Desc URL field within Frame Wizard. The Frame Desc URL field can be used to specify a link to a long description of the selected frame. This description should supplement the short description provided using the NAME attribute (described further below) for any frames on your webpage.

No Frames Link

An accessibility feature included within the Frame Wizard is the No Frames Link. This field can be used to specify the location of alternate content that can be displayed by web browsers that don't support frames or are configured not to display frames. For instance, if you have created a version of your webpage with no frames, called no_frames_homepage.html then the code you insert within your HTML document (below your FRAME or FRAMESET tags) might look something like:

<NOFRAMES>

<A HREF="http://www.isp.com/no_frames_homepage.html">Frame Link: http://www.mine.com/no_frames_homepage.html</A>

</NOFRAMES>

NAME

The NAME attribute gives a name to an element and (as with the ALT attribute) is commonly implemented as a tooltip on visual browsers. The attribute value must begin with a character in the range A-Z or a-z.

The NAME should be informative and be based on the content of the element since non-Windows browsers may use the NAME as a title for the element. For example, NAME=left would be inappropriate since it says nothing about the content while NAME=nav would be inappropriate since it is not very informative. More suitable would be NAME=Navigation. The TITLE attribute can also be used to provide a slightly longer title for the frame, though this is not widely supported by current browsers.

<FRAMESET COLS="50%,50%">

<FRAME NAME="Sausage Software's International Site" SRC="http://www.sausagetools.com/">

<FRAME NAME="Sausage Software's Australian Site" SRC="http://www.sausagetools.com.au/">

</FRAMESET>

The NAME attribute can also be used with the A, AREA, BASE, FORM, and LINK elements.

For example, in your webpage, you may wish to create an anchor to another section of your website as follows:

<A HREF="#Picture_Section">Click here to view the pictures on this webpage.</A>

At the section that you wish to link to, you can then just insert the following code:

<A NAME="Picture_Section"></A>

For more information about using targets within your webpages, read the Insert Link tutorial.

TITLE

The TITLE attribute provides a title for an element and (as with the ALT attribute) is commonly implemented as a tooltip on visual browsers, though many browsers lack support for TITLE. This accessibility attribute is provided in the HotDog Forms wizard and would be inserted into your document in a similar format as shown below:

<FORM METHOD="POST" TITLE="SURVEY FORM">.........</FORM>

The TITLE attribute, however, is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

<A HREF="mailto:support@my_company.com" TITLE="Customer Feedback">support@my_company.com</A>

<IMG SRC="yahtzee.gif" TITLE="A Yahtzee Animation">

<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. For example:

He weighs 180 <ABBR TITLE="pounds">lbs</ABBR>.


Editing Text

Edit Functions

Menu, Toolbar and Keyboard Shortcuts.

There are several different ways you can edit your document in HotDog using:

  • The Edit Menu.

  • The Edit Toolbar.

  • Keyboard Shortcuts.

Of these three, the keyboard shortcuts are the quickest to use, so it is worth spending some time to memorize them. (All the keyboard commands are standard with most applications, e.g. Microsoft Word.)

The ability to edit your webpages easily is crucial to productive website development. Within HotDog Pro we have created an enormous number of features to assist you in this. Among these, the toolbar and menu Edit functions cover the most basic features, including:

  • undoing/redoing up to 300 actions;

  • cutting, clearing and copying;

  • pasting, including pasting into a generated table and smart pasting;

  • finding and replacing;

  • selecting;

  • spell checking and word suggestions using HotDog Pro's built-in thesaurus;

  • Accessibility checking dialog that checks your current HTML page and provides a list of Accessibility errors. Double-clicking any error will open the appropriate HotDog dialog to allow you to quickly and easily add the accessibility fields missing from the selected HTML element.

  • editing all your HotDog preferences, including the appearance and functionality of your environment and editing window; the internal preview (ROVER) and browser settings; dictionaries; and your directory, publishing and server settings.

What do you want to do?

Copy Text.

Delete Text.

Find and Replace Text.

Move Text.

Spell Check.

See a Summary of Keyboard Shortcuts.


Copying Text

Step-by-Step Directions.

  1. Highlight the text you want to copy. To do this with your mouse: place the cursor to one side of the text, left-click and drag the cursor over the text.

  2. Do one of the following:

  • Click the Copy button on the Edit toolbar:

  • On the Edit menu, select Copy.

  • Press <Ctrl + C>.

  3. Now place your cursor where you want to insert the copied text.

  4. Do one of the following:

  • Click the Paste button on the Edit Toolbar.

  • On the Edit menu, select Paste.

  • Press <Ctrl + V>.


Deleting Text

Step-by-Step Directions.

  1. Highlight the text you want to delete.

  2. Press the Delete key or the Backspace key.

TIP

  • You can significantly speed up your typing by using different keyboard shortcuts to highlight or select text. For example, holding both the <Ctrl> and <Shift> keys down and using the arrows keys will highlight entire lines or single words, one at a time.


Finding and Replacing Text

Step-by-Step Directions.

These directions will help you find (and replace) text within the currently opened document. In addition to document wide find and replace searches, you can also search entire websites or use the Find and Replace SuperTool to search entire directories.

To Find Text:

  1. First, do one of the following:

  • From the Edit menu, select Find.

  • Click the Find button on the Edit toolbar:

  • Press <Ctrl + F>.

  2. In the Find What box, enter the text you want to find.

  3. Click Find Next to find the first instance of the text to search for.

  4. Repeat step 3 if you wish to find further instances of the text or click Cancel if you want to discontinue the search.

To Replace Text:

  1. First, do one of the following:

  • From the Edit menu, select Replace.

  • Click the Replace button on the Edit toolbar:

  • Press <Ctrl + R>.

  2. In the Find What box, enter the text you want to find ("search text").

  3. In the Replace With box, enter the text you want to replace with the search text ("replace text").

  4. Click Find Next to find the first instance of the text to search for.

  5. Do one of the following:

  • Press Find Next to find the further instances of your search text. (This will not replace your text.)

  • Click Replace to replace the currently found instance of search text with the replace text.

  • Click Replace All to replace all instances of the search text in your document with the replace text.

NOTE

  • The text is searched from where your cursor is located within your document, so to search the entire document, make sure the cursor is at the top of the page You can do this by pressing <Ctrl + Home>.


Keyboard Shortcuts

Your cursor should be in the HotDog Editing window for these shortcuts to work.

Useful Miscellanous Shortcuts

Toggle Resource Managers | F4
Toggle Edit/HTML Property view | <CTRL> + <ENTER>
Start Code Completion | <CTRL> + <SPACE>
Check Spelling | F7
Preview Document | F9
Update Rover Preview | <CTRL> + F9
Format Font | F2
Insert <BR> Tag | <SHIFT> + <ENTER>
Insert <P> Tag | <ALT> + <ENTER>

File Menu Shortcuts.

New | <CTRL> + N
Open | <CTRL> + O
Save | <CTRL> + S
Save As | <SHIFT> + <CTRL> + S
Close | <CTRL> + W
Preview Document | F9
Print | <CTRL> + P
Print Setup | <SHIFT> + <CTRL> + P

Edit Menu Shortcuts.

Undo | <CTRL> + Z
Redo | <CTRL> + Y
Cut | <CTRL> + X
Copy | <CTRL> + C
Paste | <CTRL> + V
Find | <CTRL> + F
Replace | <CTRL> + R
Select All | <CTRL> + A
Check Spelling | F7

Insert Menu Shortcuts

Insert Image | <SHIFT> + <CTRL> + I
Insert HyperLink | <SHIFT> + <CTRL> + H
Insert Target ID | <SHIFT> + <CTRL> + A
Insert Comment | <SHIFT> + <CTRL> + C
Insert List | <SHIFT> + <CTRL> + L
Frames Wizard | <SHIFT> + <CTRL> + F
Tables Wizard | <SHIFT> + <CTRL> + T
Publish Field | <SHIFT> + <CTRL> + U
Form Wizard | <SHIFT> + <CTRL> + O

Format Menu Shortcuts

Document Properties | <SHIFT> + <CTRL> + D
Dynamic HTML Animate | <SHIFT> + <CTRL> + M
Font | F2
Bold | <CTRL> + B
Italics | <CTRL> + I
Underline | <CTRL> + U
Publish Document | <SHIFT> + <CTRL> B

Editing in HotDog

Editing in HotDog can be a whole lot faster if you use the shortcut keys below.

Triple Click | Highlights an entire line.
Double Click | Highlights a single word.
<CTRL> + Double Click | Highlights an object, such as a tag or a block of text.
Drag Highlighted Text | Moves text to new location.
<CTRL> + Drag Highlighted Text | Copies text to new location.
<CTRL> + ] | If the cursor is at a bracket (,),<,> this key combination will find the ‘opposite’ bracket.
<CTRL> + <SHIFT> + ] | As above, but the contents of the bracket are also highlighted.
<SHIFT> + --> or <SHIFT> + <-- | Highlights a character at a time in the direction of the selected arrow.
<CTRL> + --> or <CTRL> + <-- | Moves the cursor to the next word in the direction of the selected arrow.
<CTRL> + <SHIFT> + --> or <CTRL> + <SHIFT> + <-- | Highlights a word at a time in the direction of the selected arrow.
<CTRL> + > or <CTRL> + < | Jumps an entire object. For example, a block of text.
<SHIFT> + <HOME> | Highlights to the start of the current line of text.
<SHIFT> + <END> | Highlights to the end of the current line of text.
Click in the Gutter Area (left of the Editing Window). | Highlights the selected line of text.
<CTRL> + <SHIFT> + 1,2,3,4,5,6,7,8,9,0 | Sets a bookmark.
<CTRL> + 1,2,3,4,5,6,7,8,9,0 | Returns to set bookmark.
<INSERT> | Toggles betwixt Insert and Overwrite mode. (In Overwrite mode, the existing text is replaced as you type)


Moving Text

Step-by-Step Directions.

Moving text is the same as cutting and pasting text to a new location.

  1. Highlight the text you want to move. To do this with your mouse: place the cursor to one side of the text, left-click and drag the cursor over the text.

  2. Do one of the following:

  • From the Edit menu Cut:

  • Click Cut on the Edit toolbar:

  • Press <Ctrl + X>.

  3. Place the cursor where you wish the to text to appear.

  4. Do one of the following:

  • Click Paste on the Edit toolbar:

  • On the Edit menu, select "Paste".

  • Press <Ctrl + V>.

Alternatively:

  1. Highlight the text you want to move.

  2. While holding the <Ctrl> key, drag and drop the selected text to its new location.


Spell Checking

Step-By-Step Directions

To spell check a document do one of the following:

  • On the Edit menu, select Check Spelling.

  • Click on the Spell Check button in the Edit menu:

  • Press F7 on your keyboard.


Using the Thesaurus

Step-By-Step Directions

  1. Select the word for which you want a synonym. To do this with your mouse: place the cursor to one side of the word, left-click and drag the cursor over the word.

  2. Do one of the following:

  • From the Edit menu, select Thesaurus.

  • Click on the Thesaurus button on the Edit menu:

  • Press <SHIFT> + F7.

  3. Select the synonym with which you want to replace your selected word.

  4. Click Replace.

INTERESTING FACT

  • Cleave is the only word that contains two synonyms that are antonyms.


Bookmarks

Introduction

Bookmarks are a quick and simple way of marking certain places within your document. Being able to jump from one place to another in your document significantly speeds the editing process.

Adding and Recalling Bookmarks

  • On the line where you want to add a bookmark press <CTRL> + <SHIFT> + a number from 0 to 9.

  • Press <CTRL> + a number from 0 to 9 to recall a bookmark.


Code Completion

Introduction

So that you can edit your code as quickly and efficiently as possible, HotDog Pro can provides you with code completion and tooltip help for colors, images, tags and syntax errors .

Code completion is a useful tool that gives you a quick way of inserting tags and attributes. Because HotDog knows the entire HTML, CSS, ASP, JavaScript and VBScript specifications, it can present you with all the possible attributes for each tag while you edit and, where possible, the values that are associated with each tag.

The way it works is simple.

To Insert a Tag into a Document:

  1. Click in your document where you want to insert the tag.

  2. Type '<'.

  3. Press <CTRL> + <SPACE>.

  4. Do one of the following:

  • Use the arrow keys to select the tag you want to insert.

  • Type the first few letters of the attribute you want to insert, then press <ENTER>

  5. Press <ENTER> to insert the tag.

To Insert an Attribute into a Tag:

  1. Click inside a tag (but not over an existing attribute).

  2. Press <CTRL> + <SPACE>.

  3. Use the arrow keys to select the attribute you want to insert.

  4. Press <ENTER> to insert the attribute. You may be prompted to press <ENTER> again to open a dialog (e.g., to open a file dialog so as to pick an image).

  5. Press <SPACE> to enter another attribute, otherwise press <ESC> to close the Code Completion dialog.


Collapsing and Expanding Text

Collapsing and Expanding Code

Introduction

Text collapsing lets you "collapse", or "roll up", different parts of your document. The advantages are clear - when you have finished a part of your webpage, be it a table or a paragraph, you can just collapse it and get it out of the way. This way you don’t have to scroll through finished work or risk changing finished work through accidental keystrokes. This tool makes editing larger documents very much easier. If your document is part of a Website your bookmarks and collapsed text are remembered - even if you close down HotDog.

Collapsing Text

  1. Use the mouse to select the text you want to collapse.

  2. Click [image] in the gutter area to collapse the text (see example below). Alternatively, press the <CTRL> and <-> keys at the same time.

Expanding Text

Do one of the following:

  • Double click on a line of collapsed text to expand it.

  • Click [image] in the gutter area to collapse the text (see example below).

  • Alternatively, press the <CTRL> and <+> keys at the same time.


Commenting Text

Introduction

Providing comments about your webpage or HTML coding within your HTML documents is often useful for HTML editing. Any text that appears within comment tags will become "commented" when inserted into a document. Commented text is not read or displayed by browsers. For example, the commented image tag below would not be displayed by a browser. However, some search engines still use commented text as a source for search terms.

For Example:

<!-- <IMG SRC="pic.jpg"> --> would not be rendered.

To Comment Text

  1. Select the text you want to comment.

  2. Do one of the following:

  • From the Insert menu, select Comment.

  • Press <SHIFT> + <CTRL> + <C>.


Syntax Checking

Introduction

As you type, if you make any syntax errors, HotDog will notify you immediately. HotDog usually recognizes what the error is and will tell you what part of your tag is incorrect. HotDog will also describe the full HTML specification of the tag. See the HTML Property Sheet for more details on how to work with HTML.

HotDog uses several syntax files to validate any code you create. These syntax files are separated by versions and browser support. You can also specify which syntax files will be recognized in your work. For example, if you want to use only tags that are HTML version 3.2 compliant, you can specify that only allow HTML 3.2 tags are considered valid. This means that any tags or attributes that don't form part of this specification will be underlined.

This is particularly useful if you want to design your pages so that they are compatible with different browsers. (The HTML Property Sheet also displays the properties of each tag, making it very simple for you to ensure browser compatibility whilst editing - you just need to place your cursor within the tag in your editor window that you're interested in. By avoiding browser specific tags you can be fairly sure that your page will show up on many different browsers.)

Syntax Filtering and Validation

Define Syntax Specifications to use on your Document.

Your Syntax Filter preferences let you control the syntax that is recognized by HotDog. To edit these:

  1. In the Edit menu, choose Preferences and then navigate to Syntax Filters.

  2. Using the Language drop-down list, select the language for which you wish to define the filter rule. (For example, if you wish to filter your HTML tags, then select HTML).

  3. Using the Filter Rule drop-down list select the syntax specification you wish to use.

  4. Click OK.

Syntax Validation

Your Syntax Validation preferences let you control the colors used in the syntax validation process. To edit these:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select Syntax Validation.

Also See:

Code Completion

Syntax Highlighting and Coloring


Tag and Syntax Highlighting

Tag and Syntax Highlighting and Coloring

Tag Highlighting and Coloring

Changing the color of tags helps you pick out the information you need to find from a jumble of HTML. It is particularly useful when you are trying to study other people’s HTML. For example, if you are interested in Image tags, then color them green. This way they stand out against all the clutter of surrounding tags.

Turning on Tag Highlighting

At the bottom of the document, click the Tag Highlighting button:

Coloring Tags

To set the colors of your tags, read the instructions on Coloring Tags.

Syntax Highlighting and Coloring

HotDog can highlight several different syntax file types; HTML, Cascading Style Sheets (CSS), JavaScript Files (JSS), VBScript Files (VBS), ASP Files and PHP Files.

Turning on Syntax Highlighting

At the bottom of the document, click the Syntax Highlighting button:

Syntax Coloring

HotDog allows you to control the colors used in the syntax validation process. To edit the colors of your syntax:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select the file type coloring you wish to edit:

  • HTML Syntax Coloring

  • CSS Syntax Coloring

  • Javascript Coloring

  • VBScript Coloring

  • ASP Coloring

  3. Using the background and foreground colors, choose the new color for your syntax class.

  4. When finished, click OK and the changes will automatically be applied.


Formatting with Tables

Introduction

If you look at the source of most webpages on the Internet today, they will contain tables. This is probably due to the way browsers render HTML. When a browser renders HTML code it positions each object (block of text or image) relative to the other. The advantage of this way of positioning is that content can be fitted to any browser page size. The disadvantage is that the layout of the web page you design on your computer can look very different on someone else’s machine. Using tables can often ensure that browsers display your page content the way you want it to be displayed. If a table is to big for a browser window, you force the window to display horizontal scroll bars indicating that there is more content to be displayed rather than the browser moving the images to a new position.

Creating Tables Using the Quick Table Function.

  1. From the Table Toolbar, click the Quick Table button:

  2. Drag out the table window until the table is the size you want to insert and click again.

Create a Table using the Table Wizard.

The Table Wizard provides a convenient way of creating tables, especially if you are not familiar with HTML. The Insert Table wizard guides you through the process step by step, with diagrams and pictures helping you throughout.

To Start the Table Wizard:

  • On the Insert menu, click Table.

NOTE

One disadvantage in using tables is that all images in a table must be fully loaded before they can be displayed, unless you are very careful to include each image's height and width in their tag definition.


Popup HTML Help

Typical ToolTip Help

HotDog has advanced HTML and Context Sensitive Help. If you hold your mouse over a tag or attribute, popup help appears giving you a short description of the tag or attribute. For example, if you hold the mouse over the BORDER attribute in the TABLE tag, a popup message appears saying: Sets the size, in pixels, of the table border.

In the example below, “MIDDLE” is not a valid value for the ALIGN attribute. To avoid creating simple errors like this, you can use Code Completion in conjunction with the HTML Property Sheet.


Rover

Split-View Editing

HotDog Pro has a useful 3-view editing feature. This means whilst editing you can:

  1. view the HTML code of the document you are editing in the editing window;

  2. preview your webpage using live document rendering in the ROVER view (Real-time Output ViewER);

  3. view the HTML code of another open document (or the same document!) in an additional editing window simply by clicking [image].

The additional editing window makes comparing the code in different documents or within the same document a simple matter. Copying and pasting between different documents or within the same document is also easy.

The ROVER view is HotDog Pro's own internal browser, which means that as you edit you can preview the way your webpage would actually look on the internet. The more common WYSIWYG (What You See Is What You Get) approach in many webpage programs tend to hide the HTML code from authors, leading them to believe that what they see is what their audience will see, which is often not the case. Professional webmasters know that live document rendering gives them full control over their source code while still providing them with an authentic visual representation of their web page in real-time.

The ROVER window has the additional advantages of allowing you to:

  • browse the web internally;

  • download any remote page being viewed and open the source in a new editor document;

  • use rulers that make it simple to see which page elements are aligned to which part of the page and aid in the debugging process;

  • customize your in-line browser size.

For greater editing space, you may occasionally prefer not to use the ROVER view, so HotDog Pro allows you to minimise your ROVER view. Or you can even turn ROVER off completely and preview your webpages externally by clicking [image] (on the File toolbar) and selecting the browser of your choice. This is an especially useful function for ensuring compatibility between different browsers. (HotDog Pro searches for and automatically installs any external browsers it finds on your system when you start HotDog Pro for the first time.)


Insert Image

Introduction

The Insert Image window gives you a convenient way of inserting Images into your document. If you are new to HTML click the [image] button to start a wizard to guide you through the process.

To quickly insert an Image in your document.

  1. On the Insert menu click on Image...

  2. Click the button and using the File Picker choose the image file you want to insert. A preview of the image you chose appears in the “Image Preview Window”.

  3. Click OK to insert the image into your document.

TIP

An alternative way of inserting an image into a document is to drag a *.JPG or *.GIF file from the Local Files resource panel (or the Websites resource panel) into an open document in the HotDog editor.

Further Help

Inserting Images using the Local File Manager.

TIP

You can turn your image into a link using the Image Wizard.


Image Compression

Introduction

Nearly all files can be compressed without losing any of the original data at all. For example, take the following text:

‘the cat sat on the mat’ --22 characters.

Simple text compression occurs by replacing symbols for common words or letter combinations.

Using the following substitutions where, ‘_the_’ becomes ‘#’ and ‘at’ becomes ‘^’ the text above becomes:

#c^ s^ on#m^ --12 characters

0% compression means that the file has not changed size. 99% compression means the file is now only one hundredth of its original size. In the case above the file has been compressed by about 45% using only 2 simple substitutions.

Images, especially photographic images, are harder to compress. This is because they infrequently contain identical strings of characters that can be easily substituted. Many different solutions have been devised to solve this problem, one of the most successful being JPEG compression. To be precise, the JPEG solution is not true compression. As you compress your image, more and more information is lost. If you compress an image too much it looks grainy. However the power of JPEG compression is that you can heavily compress a picture before it begins to look perceptibly different. Compression levels of up to 50% are common.

Using Image Lab to compress your Images.


Image Processing

Introduction

Because a visitor has to download every one of your images to correctly view your webpage, image processing is of paramount importance. The term “Image Processing” is used here in the sense of optimizing your image's quality with respect to its file size. The JPEG picture format lets you compress you image. This means that you can make your image file size smaller which is very useful for download times. However, there is a price to pay for this compression. JPEG compression is not perfect. This means that as you compress your image, it looks more and more blurred and grainy. The Image Preview Dialog has the tools you will require to tweak your image to allow for the perfect file size to image quality trade off.

What Do You Want To Do?

Start HotDog Image Lab.

Give your Image a Transparent Color.

Compress your Image’s File Size.

Use LOWSRC Images with your Images.

Change the Format of an Image (i.e. GIF to JPEG etc.)


Re-sizing Images

Introduction

There are two ways of re-sizing images. You can:

leave the file in its original size and just render the image in as a smaller size, or

you can make the image smaller by actually altering the images size (and hence the image's file size).

Websites commonly have many pictures. Websites that specialize in pictures (known as galleries) frequently use thumbnail pictures. A thumbnail picture is a small version of the original picture (that is, it has a smaller file size) . When the picture is clicked on, it displays the larger full size image. This is useful because it allows users to only view the images they want to actually see, thus saving on download time and money.

A common mistake many novice web designers make is creating thumbnails by using the full file size of an image but displaying it in thumbnail size. This is not very useful because to display the thumbnail sized image, the entire full size image has to be downloaded anyway.

NOTE

HotDog can automatically create tables of thumbnails for you. See the "Thumbnail Wizard" for more details.


LOWSRC Images

Introduction

When a visitor loads an image from your webpage, the waiting can be quite tedious. One solution is provided by HTML. Before loading your main, high quality image, the browser loads another image you provide first. This image is a highly compressed picture that, as a result, is usually of low quality. This image is loaded quickly by the browser and gives the user an idea of the images to come, so hopefully they will stick around. Your high quality image is loaded over the top of your low quality image after all the LOWSRC images have been loaded. The result is that a visitor is less likely to feel frustrated about not being able to see content related images. The Insert Image Wizard and BandWidth Buster can automatically generate the LOWSRC files for you.

What do you want to do?

Start the Insert Image Wizard.

Install the Bandwidth Buster SuperTool.


Images that can be Used on the Web

Introduction

There are two main types of images that can be viewed by other people on the Net. They are GIFs and JPEGs. To understand the differences between these types of pictures, you must first have a bit of background as to how pictures are stored electronically.

A picture can be divided up into a very fine grid of pixels. A pixel is the smallest dot that you can see on your computer. Typical computer screens have 800 x 600 or 640 x 480 pixels. Each pixel in the grid is given a location and a color. Because the picture is going to be stored electronically, the color is represented as a number. Then all these numbers are compressed in size. The pictures can be compressed in size easily because for most pictures there are large areas that are the same color (like the sky for instance). When you view this electronic picture on your computer, it is decompressed and then the computer simply rebuilds the grid of pixels.

There are many ways of ordering the grid and different methods for compressing the pictures. The methods to store pictures on the Internet are called GIFs or JPEGs. (JPEGs are also referred to as JPGs. This is the same type of file, just a slightly different name.). It is possible to tell what sort of image you are using by the extension.

For Example

Filename | Can be viewed by browsers?
*.gif | Yes
*.jpg, *.jpeg | Yes
*.bmp | No
*.tiff | No
*.psd | No
*.shg | No
*.png | Some

There is shareware software available that will convert from any graphics format to any other format. Do a Web search on Paint Shop Pro™.

Where can these Images be Found?

The easiest way to find images is on the Net. There are repositories of pictures and many institutions publish their own pictures for general use (like NASA). If you find a picture that you want on the Net but are not sure as to whether you can copy it, e-mail the person who made the site. Usually they will be happy for you to put it on your own Website, along with a credit and a link back to their own site. (This is how Websites get famous!)

What do you need to create your own Images?

To create your own pictures from scratch you will need access to a scanner. A scanner is a machine (a lot like a fax machine) that copies ordinary photos, pictures or paintings electronically to digital files (such as GIF or JPEG files). You will also need software to manipulate these images. For example, you may wish to add special effects to a picture or to change the contrast. A very well written tool is called Paint Shop Pro. See if you can get hold of a copy (it’s shareware).


Start Image Lab

Step-By-Step Directions

  1. In your document, right-click over an image tag. (<IMG...>)

  2. Select “Preview Image”

  3. Click “Convert”.


Image Lab

Introduction

Because a visitor has to download every one of your images to correctly view your webpage, image processing is of paramount importance. The term “Image Processing” is used here in the sense of optimizing your image's quality with respect to its file size. The JPEG picture format lets you compress you image. This means that you can make your image file size smaller, which is very useful for download times. However, there is a price to pay for this compression. JPEG compression is not perfect. This means that as you compress your image, it looks more and more blurred and grainy. The Image Preview Dialog has the tools you will require to tweak your image to allow for the perfect file size to image quality trade off.

What Do You Want To Do?

Start HotDog Image Lab.

Give your Image a Transparent Color.

Compress your Image’s File Size.

Use LOWSRC Images with your Images.

Change the Format of an Image (i.e. GIF to JPEG etc.)


Change the Format of an Image

Step-By-Step Directions

  1. In your document, right click over the image you want to convert.

  2. Click “Preview Image”.

  3. Click "Convert".

  4. These are two options, GIF or JPEG. Click the file type you want the image converted to.

  5. Click Preview.

  6. Click "Save As" and provide your image with a new name.


Compress Image File Size

Step-By-Step Directions

  1. In the editing window, right-click over the code of the image you want to compress (or convert to a JPEG) and select Preview Image.

  2. Click Convert. This brings up HotDog's Image Lab.

  3. Within Image Lab, click the JPEG radio button

  4. Check the Automatically Preview checkbox to get constant updates on how your image appears. (Alternatively, click the Preview button after making your changes.)

  5. Click the JPEG Compression tab - you may need to maximize the Image Lab window to do this.

  6. Use the compression slider to change the compression of your image. Keep an eye on the Image File Size caption to see how much your image is compressed.

  7. Click Save As to save your new image.

The Compression Slider

This slider sets the level of compression used on your JPEG image. If you use full compression your image noticeably degrades. So, as you increase the compression, keep an eye on the image file size and image preview. This will allow you to gauge the optimal image quality against the image file size.


Create a Transparent Color

Step-By-Step Directions

  1. In your document, right-click over the image you want to add a transparent color to.

  2. Click “Convert”.

  3. Make sure the GIF format option has been selected.

  4. Click the GIF Transparency tab.

  5. Check the “Transparent” box.

  6. Using the Color Picker [image], select the color in your image you want to be made transparent.

  7. Click “Save As” to save your image.


Use LOWSRC Images

Step-By-Step Directions

When a visitor loads an image from your webpage, the waiting can be quite tedious. One solution is provided by HTML. Before loading your main, high quality image, the browser loads another image you provide first. This image is a highly compressed picture that, as a result, is usually of low quality. This image is loaded quickly by the browser and gives the user an idea of the images to come, so hopefully they will stick around. Your high quality image is loaded over the top of your low quality image after all of the LOWSRC images have been loaded. The result is that a visitor is less likely to feel frustrated about not being able to see content related images. The Insert Image Wizard and BandWidth Buster can automatically generate the LOWSRC files for you.

What do you want to do?

Start the Insert Image Wizard.

Install the Bandwidth Buster SuperTool.


Multimedia Manager

Introduction

The Multimedia Manager helps you control the various types of media you will commonly insert into your webpages.

To Open the Multimedia Manager

Do one of the following:

  • From the View menu, select Multimedia Manager.

  • From the Local Files Manager, right click on a file and select Multimedia Manager

To Create an Image Thumbnail Table

From within the Multimedia Manager, click [image] .

Insert a Link to the Currently Selected Media into a Document.

  1. From within the Multimedia Manager, browse to and locate the media file you want to link to.

  2. Click [image] .


Character Formatting

Overview.

Character formatting is used to change the appearance of text within a paragraph. For example, this text has had different forms of character formatting applied to it. The common effects are listed below. There is a difference between using HTML tags or inline styles to format text. This difference is explained in the help on Character Formatting with Style Sheets. HotDog provides you with two ready made ways of formatting your text, using the Format Font dialog (Press F2) or using the HTML Property Sheet.

Changing Font Color.

Changing Font Size.

Changing Font Type.

Making Text Appear in Italics.

Making Text Bold.

Underlining Text.

Using Font Sets.

Character Formatting with Style Sheets.

HTML Examples.

The examples below demonstrate the different ways formatting can be applied to characters, using HTML tags and/or inline styles. A full discussion of the relative advantages and disadvantages of each is provided here.

Changing Font Color - Using the Font Tag.

<FONT COLOR="RED">Example Text</FONT>

Example Text

Changing Font Color - Using Inline Styles.

<SPAN STYLE="color : purple;">Example Text</SPAN>

Example Text

Changing Font Size - Using the Font Tag.

<FONT SIZE="2">Example Text</FONT>

Example Text

Changing Font Size - Using Inline Styles.

<SPAN STYLE="font-size : 12.0pt;">Example Text</SPAN>

Example Text

Making Text Bold - Using the Font Tag.

<B>Example Text</B>

Example Text

Making Text Bold - Using Inline Styles.

<SPAN STYLE="font-weight : bold;">Example Text</SPAN>

Example Text


Character Formatting Using Styles

What is "Formatting"?

A webpage (or indeed, any text) has two parts: content and the presentation of content. For example, in a newspaper the content is all the words, the formatting is the different font styles and layout applied to headings, paragraph and images. Formatting provides important (non textual) visual clues to a reader about how to read an article, what bits are important, what themes are being discussed etc. For example, in this help I use a blue background to indicate a heading.

Like a newspaper, a webpage needs to use formatting on various bits of text to guide readers through the process of understanding its content.

ASIDE

Even plain text in book contains formatting, such as spaces between words and a regular line size (usually dicated by the physical size of the page :-)

What are the Different Ways Text can be Formatted in a Webpage?

There are two ways that text can be formatted in a webpage:

  • Using HTML Tags.

  • Using Style Sheets.

For a discussion on the relative benefits of each, see the discussion about Using Styles. There are three ways of using styles in HotDog:

  1. Inline Styles: Inline style definitions store the style information in the tag to which it applies - it will affect no other tags.

  2. External Style Sheets: External style sheets store all the style information in a separate file - that is, linked to by each webpage.

  3. Document Styles: Document style definitions store the style information in its entirety at the top of each webpage.

If you are new to styles, try using the Format Font and Format Paragraph dialogs (instructions below) until you are familiar with the syntax.

How to Use Style Sheets to Format Characters

Using the Format Character Dialog.

Using the Format Paragraph Dialog.


Changing Font Color

Step-by-Step Directions

  1. Select the text for which you want to change the color.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

To format your text using standard HTML tags:

  1. In the Format Font dialog, navigate to [Font Tags]

  2. In the Tag Effects window, use the Color drop-down list to select the color in which you want your text to appear.

  3. Click OK to save the changes.

To format your text using inline styles:

  1. In the Format Font dialog, navigate to [Inline Styles][Font].

  2. In the Inline Font Styles window, use the Text Color drop-down list to select the color in which you want your text to appear.

  3. Click OK to save the changes.

NOTES

  • Use the Add Color button to add new colors (other than the 16 predefined colors).

  • If you want to change the color of text that is already formatted, make sure to highlight the format tags as well (e.g., <SPAN>, <FONT>, <B> etc).

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Changing Font Size

Step-by-Step Directions

  1. Select the text for which you want to change the size.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

To format your text using standard HTML tags:

  1. In the Format Font dialog, navigate to [Font Tags]

  2. In the Tag Effects window, use the Size drop-down list to select the size in which you want your text to appear.

  3. Click OK to save the changes.

To format your text using inline styles:

  1. In the Format Font dialog, navigate to [Inline Styles][Font].

  2. In the Inline Font Styles window, use the Size drop-down list to select the size in which you want your text to appear. (Selecting Enter Number at the end of the list allows you specify your own font size. )

  3. Click OK to save the changes.

NOTES

  • If you want to change the size of text that is already formatted, make sure to highlight the format tags as well (e.g., <SPAN>, <FONT>, <B> etc).

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Changing Font Type

Step-by-Step Directions

  1. Select the text for which you want to change the face.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

To format your text using standard HTML tags:

  1. In the Format Font dialog, navigate to [Font Tags]

  2. In the Tag Effects window, use the Font drop-down list to select the font face you wish to use.

  3. Click OK to save the changes.

To format your text using inline styles:

  1. In the Format Font dialog, navigate to [Inline Styles][Font].

  2. In the Inline Font Styles window, use the Face drop-down list to select the font type that you wish to use. (Selecting Enter Font Name at the end of the list allows you to enter the name of any fonts not listed.)

  3. Click OK to save the changes.

NOTES

  • Click the Edit Degradable Fonts button in the font dialogs to define font lists:

  • If you want to change the font face of text that is already formatted, make sure to highlight the format tags as well (e.g., <SPAN>, <FONT>, <B> etc).

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Making Text Appear in Italics

Step-by-Step Directions

  1. Select the text you wish to italicize.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

To format your text using standard HTML tags:

  1. In the Format Font dialog, navigate to [Font Tags]

  2. In the Tag Effects window, tick the Italic check box.

  3. Click OK to save the changes.

To format your text using inline styles:

  1. In the Format Font dialog, navigate to [Inline Styles][Font].

  2. In the Inline Font Styles window, select italic using the Style drop-down list.

  3. Click OK to save the changes.

The Style drop-down list can also be used to specify a normal or oblique face within a font family. The different options are defined below.

A value of normal selects a font that is classified as 'normal' in the web browser’s font database. Normal font styles are sometimes referred to as Roman or Upright.

A value of italic selects a font that is classified as 'italic' in the web browser’s font database or, if that is not available, one labeled 'oblique'. Fonts with Italic, Cursive or Kursiv in their names will typically be labeled 'italic'.

A value of oblique selects a font that is classified as 'oblique' in the web browser’s font database. 'The font that is labeled 'oblique' in the web browser’s font database may actually have been generated by electronically slanting a normal font. Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the web browser’s font database.

NOTES

  • If you want to change the appearance of text that is already formatted, make sure to highlight the format tags as well (e.g., <SPAN>, <FONT>, <I> etc).

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Making Text Bold

Step-by-Step Directions

  1. Select the text you wish to make bold.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

To format your text using standard HTML tags:

  1. In the Format Font dialog, navigate to [Font Tags]

  2. In the Tag Effects window, tick the Bold check box.

  3. Click OK to save the changes.

To format your text using inline styles:

  1. In the Format Font dialog, navigate to [Inline Styles][Font].

  2. In the Inline Font Styles window, select bold using the Weight drop-down list.

  3. Click OK to save the changes.

Try using the different values in the Weight drop-down list (such as "Bold", "Bolder" etc). The Weight drop-down list is used to select the weight of the font. The values 100 to 900 form an ordered sequence of darkness, where each number indicates a weight that is at least as dark as its predecessor is. The different options are defined below.

normal

Selecting this option is synonymous with selecting a weight of 400.

bold

Selecting this option is synonymous with selecting a weight of 700.

bolder

Selecting this option specifies the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value is 900, in which case the resulting weight is also 900.

lighter

Selecting this option specifies the next weight that is assigned to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value is 100, in which case the resulting weight is also 100.

NOTES

  • There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, others may have eight different face weights. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.

  • If you want to change text that is already formatted, make sure to highlight the format tags as well (eg, <SPAN>, <FONT>, <B> etc).

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Underlining Text

Step-by-Step Directions

  1. Select the text you want to underline.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

To format your text using standard HTML tags:

  1. In the Format Font dialog, navigate to [Font Tags]

  2. In the Tag Effects window, tick the Underline check box.

  3. Click OK to save the changes.

To format your text using inline styles:

  1. In the Format Font dialog, navigate to [Inline Styles][Font].

  2. In the Inline Font Styles window, click the Underline button:

  3. Click OK to save the changes.

You can also use the other Styles... button options to specify other "decoration" styles to the text. The different options are defined below.

Clicking on this button underlines the text.

Clicking on this button causes the text to blink.

Clicking on this button strikes out the text.

Clicking on this button overlines the text.

Clicking on this button specifies that there is to be no text decoration.

NOTES

  • If you want to change text that is already formatted, make sure to highlight the format tags as well (eg, <SPAN>, <FONT>, <B> etc).

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Using Font Sets

Introduction

A degradable font is just a list of different font types in which you would like some text to be rendered. When a visitor views your web page, their browser searches through the font list, looking for the first installed font on their computer. Then the text is rendered in this font type.

It is necessary to have a list of fonts, in case the visitor viewing your webpage does not have one or more of the fonts you would like rendered installed on their computer.

Opening the Edit Degradable Font List dialog.

  1. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

  2. Click [image] in the Format Font dialog.

Creating a New a Font List.

  1. The Font Group drop-down list is used to specify a group of alternative fonts that a web browser can use if the primary font is not available. Click [image] to create a new font group. (Clicking [image] allows you to delete the selected font group.)

  2. The Available Fonts panel displays the list of fonts available on your system. Select a font on this list and click on [image] to add the font to your new font group. If you wish to add a font to the Font Group that is not on this list, type the name of the font in the drop-down list field below and then press <Return> or <Enter> on your keyboard. (Clicking [image] allows you to delete the selected font.)

  3. Repeat step 2 for any other fonts you wish to add to your font group.

  4. You can click [image] and [image] to move different fonts you have selected in the font group up and down the list. If a primary font is not available then a web-browser will be able to use this list of alternative fonts in the order specified.

  5. Click <OK> to save your new font group.

Applying a Degradable Font List to Text in a Webpage.

  1. Use either the Format Font or the Format Paragraph dialogs to apply formatting to selected text (or a paragraph).

  2. When selecting a font from the drop down font list, your font sets are listed at the top.

An example of selecting a font list.


Vertical Text Alignment

Introduction

This topic only relates to the vertical alignment of text using the Format Font dialog. Information regarding the horizontal alignment of text, or the alignment of images with text, can be found in the discussion on paragraph alignment. For more detailed information regarding image alignment, refer to the discussion about changing the way text flows within paragraphs. Alternatively, see the instructions on inserting images for detailed information about the different image properties.

Step-by-Step Directions

Vertically aligning text using inline styles provides greater flexibility than using standard HTML Tags.

  1. Select the text you wish to edit.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.

To vertically align your text using inline styles:

  1. In the Format Font dialog, navigate to [Inline Styles][Font].

  2. In the Vert Align drop-down list select the alignment of the paragraph. This aligns your paragraph using inline style definitions. The different options are defined below.

baseline

Selecting this option aligns the baseline/bottom of the text with the baseline of the line.

sub

Selecting this option inserts the text as a subscript (a subscript is a character appearing immediately below and to the right or left of another character).

super

Selecting this option inserts the text as a superscript (a superscript is a character appearing immediately above and to the right or left of another character).

top

Selecting this option aligns the top of the font with the tallest element on the line.

text-top

Selecting this option aligns the top of the element with the top of the parent element's font

bottom

Selecting this option aligns the top of the font with the lowest element on the line

text-bottom

Selecting this option aligns the bottom of the element with the bottom of the parent element's font

To vertically align your text using standard HTML tags:

With this method two vertical alignment options are available: subscript and superscript. Selecting the subscript option inserts the text as a subscript (a subscript is a character appearing immediately below and to the right or left of another character). Ticking the superscript option inserts the text as a superscript (a superscript is a character appearing immediately above and to the right or left of another character).

  1. In the Format Font dialog, navigate to [Font Tags].

  2. In the Tag Effects window, tick either the Superscript or Subscript check box.

  3. Click OK to save the changes.

NOTES

  • If you want to change the appearance of text that is already formatted, make sure to highlight the format tags as well (e.g., <SPAN>, <FONT>, <I> etc).

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Open the Format Font Dialog

Step-By-Step Instructions

  1. Select the text you wish to format.

  2. Do one of the following:

  • On the Format menu, select Font.

  • Click the Font button on the Format toolbar:

  • Press F2.


Format Font Dialog

Introduction

The Font Dialog is used to change the color, size and style of the fonts you use in your documents. If you want to change only a portion of the text in your document, highlight the text before opening the Font Dialog.

Remember - if you select an unusual font type for your webpage, and the visitor viewing your webpage does not have that font installed on their computer, then that font will not be displayed when they view your webpage. Instead, a default font will be displayed. To give you greater control over the font type used in your webpages, degradable fonts have been introduced. See below for more details.

(Note - See the Format Font Tutorial for an example of using the Format Font Dialog).

NOTE

  • By default the browser with which you preview your style is Internet Explorer. Remember, not every style you design works right under IE, and most style definitions look slightly different under different browsers. This is because the browser companies have some discretion in the appearance of various styles.

  • Much of the information below is paraphrased or directly quoted from the World Wide Web Consortium, http://www.w3c.org.

  • The Style Editor only supports the CSS1 specification.

Font

Face

The value is a prioritized list of font family names and/or generic family names.

Size

Specifies the size of the font to appear. For details on units, see http://www.w3.org/TR/REC-CSS1#font-properties

Vertical Alignment

Aligns the text with surrounding text (i.e., superscript, subscript etc.)

Weight

Affects how thickly the text is written (bold etc).

Style

Controls whether the text is displayed in italics. Note most browser render oblique and italics the same.

Styles...

Allows for the underlining, overlining and strikethroughing of text.

Capitalization...

Contols the case with which the text is rendered.

Letter Spacing

Indicates the amount of space between characters.

Word Spacing

Indicates the amount of space between words.

Text Color

Allows the selection of a color with which the text is rendered.

What Do You Want To Do?

Open the Font Dialog.

Change the Color of Text.

Change the Size of Text.

Change to type of Font used.

Make Text appear in Italics.

Make Text appear Bold.

Underline Text.

Use Inline Styles.

Learn About Degradable Font Lists.

Character Formatting - Overview.

View a List of Shortcut Keys.


Working with Paragraphs

Introduction

Paragraphs are blocks of text. They can be simple paragraphs as defined by the <P>.</P> tags or headings as defined by the <H1>.</H1> - <H6>.</H6> tags.

Why Use Paragraphs?

Paragraphs help you organize your content consistantly through out your webpage. For example, by actually using the <H1> tag to indicate a a primary heading in your document - instead of using plain text, made bigger with font tags, you can save yourself time - and make your webpage more accessible.

An example of two webpages - one using paragraphs to define struture - one using no structure whatsoever.

Related Topics

Format Paragraph Dialog.

Format Paragraph Dialog Tutorial.


How To Open the Format Paragraph Dialog

Step-By-Step Directions

  1. Highlight the paragraph you want to edit.

  2. From the Format menu, select Paragraph.

  3. In the Format Paragraph dialog, navigate to the styles category you want to edit.

NOTES

  • Occasionally you may wish to change a paragraph style that you have already defined for a set of tags. Instead of selecting all the blocks of text within the tags that you wish to format, just select the entire opening tag. For example, if your paragraph is within H1 tags then you would select everything within:

<H1 STYLE=" ......">

Then just go to the Format menu and select Paragraph as usual.

  • If you select multiple paragraph tags for editing, only those attributes all paragraphs have in common will be displayed in the Format Paragraph dialog.

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Format Paragraph Dialog

Introduction

The Format Paragraph dialog lets you use the power of style sheets to format your paragraphs. By default, the details of your paragraph style will be inserted within an opening paragraph tag <P>. For example:

<P STYLE="{font-family : Tahoma; font-weight : bold;}">

A close tag </P> will automatically be placed after any text that you have selected. For example:

<P STYLE="{font-family : Tahoma; font-weight : bold;}">Text within the paragraph.</P>

If you wish to use different tags then in the Format Paragraph dialog navigate to Paragraph Tag and, in the Paragraph Style drop-down list, select the tag of your choice.

What Do You Want To Do?

How to Open the Format Paragraph Dialog.

Change the Style of a Paragraph (H1, H2 etc).

Change the Alignment of a Paragraph.

Change the way Text Flows Around a Paragraph.

Working with Paragraphs - Overview.

NOTES

  • Occasionally you may wish to change a paragraph style that you have already defined for a set of tags. Instead of selecting all the blocks of text within the tags that you wish to format, just select the entire opening tag. For example, if your paragraph is within H1 tags then you would select everything within:

<H1 STYLE=" ......">

Then just go to the Format menu and select Paragraph as usual.

  • If you select multiple paragraph tags for editing, only those attributes all paragraphs have in common will be displayed in the Format Paragraph dialog.

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Style Editor Help

Introduction

The Style Editor gives you visual control over the design of your inline and external style definitions.

NOTE

  • By default the browser with which you preview your style is Internet Explorer. Remember, not every style you design works right under IE, and most style definitions look slightly different under different browsers. This is because the browser companies have some discretion in the appearance of various styles.

  • Much of the information below is paraphrased or directly quoted from the World Wide Web Consortium, http://www.w3c.org.

  • The Style Editor only supports the CSS1 specification.

Font

Face

The value is a prioritized list of font family names and/or generic family names.

Size

Specifies the size of the font to appear. For details on units, see http://www.w3.org/TR/REC-CSS1#font-properties

Vertical Alignment

Aligns the text with surrounding text (i.e., superscript, subscript etc.)

Weight

Affects how thickly the text is written (bold etc).

Style

Controls whether the text is displayed in italics. Note most browser render oblique and italics the same.

Styles...

Allows for the underlining, overlining and strikethroughing of text.

Capitalization...

Contols the case with which the text is rendered.

Letter Spacing

Indicates the amount of space between characters.

Word Spacing

Indicates the amount of space between words.

Text Color

Allows the selection of a color with which the text is rendered.

Paragraph

Text Alignment

Describes the alignment of a paragraph, left, right, center and justified.

First Line Indent

Indicates how far the first line of a paragraph is indented.

Left Indent

Indicates how far the left side of the paragraph is indented.

Right Indent

Indicates how far the right side of the paragraph is indented.

Spacing Above

Indicates how far the top of the paragraph is indented.

Spacing Below

Indicates how far the bottom of the paragraph is indented.

Height

Indicates the height of the paragraph (useful for images say).

Borders

Style

The various styles of border, dotted, single, double etc.

Thickness

Indicates the thickness of each border.

Padding

Indicates how much room exists between the paragraph and the border.

Color

Sets the color of the border.

NOTE

You can specify the values for the border individually by clicking on the "Edit Borders One At A Time" option and using the "border" control to select a border.

Background

Color

Sets the background color of the

Image

Selects an image to form part of your background.

Repeat

Specifies whether the image should be repeated.

Attachment

Sets how the image is attached to the webpage.

Horizontal Position

Sets where the image should appear on the webpage.

Vertical Position

Sets where the image should appear on the webpage.

List

Marker Type

Specifes the marker type (numeral, bulleted etc.)

Marker Position

Indicates the position of the marker.

Icon Image

Sets an image to be used as the marker.

Details

Display Type

Changes the tag to affect a paragraph instead of characters and vice versa.


How to Change the Alignment of a Paragraph

Text and Image Alignment within Paragraphs

Horizontal Paragraph Alignment

The following instructions can be used with both images and text within paragraphs.

  1. Highlight the paragraph you want to edit.

  2. From the Format menu, select Paragraph.

To horizontally align your paragraph using standard HTML tags:

  1. In the Format Paragraph dialog, navigate to [Paragraph Tag]

  2. Using the Paragraph Alignment drop-down list, select the the horizontal alignment of the paragraph with respect to the document margins. The different options are defined below.

Left

Selecting this option places your paragraph against the left document margin.

Center

Selecting this option centers your paragraph between the two document margins.

Right

Selecting this option places your paragraph against the right document margin.

Justified

Selecting this option justifies your paragraph between the two document margin.

  3. Click OK to apply the changes.

To horizontally align your paragraph using inline styles:

  1. In the Format Paragraph dialog, navigate to [Inline Styles][Paragraph].

  2. Using the Text Alignment button box, select the alignment of the paragraph . This aligns your paragraph using inline style definitions. The different options are defined below.

Clicking this button places your text against the left paragraph margin.

Clicking this button centers your text between the two paragraph margins.

Clicking this button places your text against the right paragraph margin.

Clicking this button justifies your text between the two paragraph margins.

  3. Click OK to apply the changes.

Vertical Text Alignment

Vertically aligning text using inline styles provides greater flexibility than using standard HTML Tags.

To vertically align your text using inline styles:

  1. Highlight the text you want to edit.

  2. From the Format menu, select Paragraph.

  3. In the Format Paragraph dialog, navigate to [Inline Styles][Font].

  4. In the Vert Align drop-down list select the alignment of the paragraph. This aligns your paragraph using inline style definitions. The different options are defined below.

baseline

Selecting this option aligns the baseline/bottom of the text with the baseline of the line.

sub

Selecting this option inserts the text as a subscript (a subscript is a character appearing immediately below and to the right or left of another character).

super

Selecting this option inserts the text as a superscript (a superscript is a character appearing immediately above and to the right or left of another character).

top

Selecting this option aligns the top of the font with the tallest element on the line.

text-top

Selecting this option aligns the top of the element with the top of the parent element's font

bottom

Selecting this option aligns the top of the font with the lowest element on the line

text-bottom

Selecting this option aligns the bottom of the element with the bottom of the parent element's font

To vertically align your text using standard HTML tags:

With this method two vertical alignment options are available: subscript and superscript. Selecting the subscript option inserts the text as a subscript (a subscript is a character appearing immediately below and to the right or left of another character). Ticking the superscript option inserts the text as a superscript (a superscript is a character appearing immediately above and to the right or left of another character).

  1. Highlight the text you want to edit.

  2. On the Format menu, select Font. Alternatively, just press F2.

  3. In the Format Font dialog, navigate to [Font Tags]

  4. In the Tag Effects window, tick either the Superscript or Subscript check box.

  5. Click OK to save the changes.

Image Alignment: Aligning Images with Text

Images also have their own horizontal and vertical alignment properties. However, every browser treats these properties slightly differently. The different attributes are defined below. The problem is that while most of these attributes do the same thing, how they look differs from browser to browser. In Netscape and MS Internet Explorer there are actually only 3 vertical different alignments you can choose.

Left

Selecting this option causes the image to float to the current left with content flowing around it.

Right

Selecting this option causes the image to float to the current right margin with content flowing around it.

Top, Texttop

Selecting this option aligns the top of the image with the top of the current text line.

Middle

The effect of this option depends on the web browser. For example, with Netscape this option aligns the baseline/bottom of the image with the baseline of the current text line. With Internet Explorer 3 this option aligns the center of the image with the absolute middle of the text.

Absmiddle

Selecting this option aligns the center of the image with the absolute middle of the text. The absolute middle of the text is the midpoint between the absolute top and bottom (i.e., the top and the bottom of the envelope around the text) of the text.

Baseline, Bottom

Selecting this option aligns the baseline/bottom of the image with the baseline of the current text line. This is the default alignment.

Absbottom

Selecting this option aligns the bottom of the image with the absolute bottom of the text. The bottom of the envelope surrounding the text is aligned with the bottom of the image.

For more detailed information regarding image alignment, refer to the discussion about changing the way text flows within paragraphs. Alternatively, see the instructions on inserting images for detailed information about the different image properties.

NOTES

  • Occasionally you may wish to change a paragraph style that you have already defined for a set of tags. Instead of selecting all the blocks of text within the tags that you wish to format, just select the entire opening tag. For example, if your paragraph is within H1 tags then you would select everything within:

<H1 STYLE=" ......">

Then just go to the Format menu and select Paragraph as usual.

  • If you select multiple paragraph tags for editing, only those attributes all paragraphs have in common will be displayed in the Format Paragraph dialog.

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


Changing the way Text Flows around a Paragraph

Introduction

Understanding how to position text around images is a key element in Webpage presentation. Aligning text and images (or tables) is discussed at length in this section.

Wrapping Text Around Images.

Give your table or image an alignment to the left and then insert text after it. For example, to create the example seen left, use the following HTML code:

<IMG SRC="graphics/image.gif" ALIGN=”LEFT”>

Lots of text goes here...

Give your table or image an alignment to the right and then insert text after it. For example, to create the example seen left, use the following HTML code:

<IMG SRC="graphics/image.gif" ALIGN=”RIGHT”>

Lots of text goes here.. .

Put your images next to one another, but give them opposite alignments, that is, left and right. For example:

Lots of text goes here.. .

<IMG SRC="graphics/image1.gif" ALIGN=”LEFT”> some text here

<IMG SRC="graphics/image2.gif" ALIGN=”RIGHT”>

Lots more text goes here.. .

This Webpage alignment is not possible using standard HTML alignment attributes. However, using tables you can easily design such a layout.

It would seem that this tutorial presupposes a lot of information, like knowing about the alignment attribute of images. With time, you will become familiar with the different attributes in each tag. For the meantime, use the HTML Property Sheet or Code Completion to become familiar with each tag.

For Example, Open the HTML Property Sheet:

  1. On the View menu, select “Resource Manager”.

  2. In the “Resource Manager” submenu, select “HTML Property Sheet”.

  3. Now the HTML Property Sheet is open, place your cursor in the IMG tag in your document.

The HTML Property Sheet now displays all the attributes associated with the IMG tag.

Clicking on each attribute updates the help at the bottom of the Property Sheet. Click on the ALIGN attribute for help.

Aligning Text with Images

Images also have vertical alignment properties. However, every browser treats these properties slightly differently. The following attributes can be used:

TEXTTOP

TOP

ABSMIDDLE

MIDDLE

BOTTOM

BASELINE

ABSBOTTOM

The problem is that while most of these attributes do the same thing, how they look differs from browser to browser. In Netscape and MS Internet Explorer there are actually only 3 different alignments you can choose. Below is a summary of the different alignments under different browsers.

NOTE

In each of the pictures below, the HTML is the word ‘pivot’ followed by an image. Only the alignment attribute of the image changes.

NETSCAPE

Text top aligned with the top of the image. This is equivalent to ALIGN=”TOP” or “TEXTTOP” Notice how Netscape puts an envelope around the text and aligns the invisible envelope with the top of the image.

Absolute middle of text aligned with the center of the image. This is equivalent to ALIGN=”ABSMIDDLE” only. The absolute middle of the text is the midpoint between the absolute top and bottom (i.e., the top and the bottom of the envelope around the text) of the text.

Baseline of text aligned with the bottom of the image. This is equivalent to ALIGN=”MIDDLE” or “BOTTOM” or “BASELINE” or having no alignment at all. This is the default alignment.

Absolute bottom of the text aligned with the bottom of the image. This is equivalent to ALIGN=”ABSBOTTOM” only. The bottom of the envelope surrounding the text is aligned with the bottom of the image.

Microsoft Internet Explorer 3 (MSIE3)

Text aligned with the top of the image. This is equivalent to ALIGN=”TOP” or “TEXTTOP”. Notice how there seems to be a text envelope at the top of the text. This envelope seems incongruous because MSIE3 has no other use for the ABS tags. Perhaps it is a rendering flaw.

Center of the text aligned with the center of the image. This is equivalent to ALIGN=”MIDDLE” or “ABSMIDDLE”.

Bottom of text aligned with the bottom of the image. This is equivalent to ALIGN=”BOTTOM” or “BASELINE” or “ABSBOTTOM” or having no alignment at all. This is the default alignment. That is, the alignment that is used if you specify no alignment at all.


Working with Paragraphs - Example

Introduction

This webpage displays two tables - both tables look similar, but the HTML code behind each is vastly different. (You may need to resize the page to display it carefully.) Note also that this page does not link to any external style sheets.

Click here to view the same page using an external style sheet.

Using Paragraphs to Organize Content.

<H2>Old Time Declensions.</H2> (Paragraph Block)

<H3>Second Person Singular</H3> (Paragraph Block)

<P> (Paragraph Block for Table)

{Table Content}

</P>

<H3>Second Person Plural</H3> (Paragraph Block)

<P> (Paragraph Block for Table)

{Table Content}

Old Time Declensions.

Second Person Singular

Nominative | Thou
Accusative | Thee
Possessive | Thy
Predicate Possessive | Thine

Second Person Plural

Nominative | Ye
Accusative | You
Possessive | Your
Predicate Possessive | Yours

Not Using Paragraphs to Organize Content.

<FONT SIZE="5"><B>Old Time Declensions.</B></FONT><BR>

<FONT SIZE="5"><B></B></FONT><BR>

<B><FONT SIZE="4">Second Person Singular</FONT></B><BR>

<B><FONT SIZE="4"></FONT></B><BR>

{Table Content}

<B><FONT SIZE="4"></FONT></B><BR>

<B><FONT SIZE="4">Second Person Plural</FONT></B><BR>

<B><FONT SIZE="4"></FONT></B><BR>

{Table Content}

Old Time Declensions.

Second Person Singular

Nominative | Thou
Accusative | Thee
Possessive | Thy
Predicate Possessive | Thine

Second Person Plural

Nominative | Ye
Accusative | You
Possessive | Your
Predicate Possessive | Yours


Working with Paragraphs - Example 2

Introduction

This webpage displays two tables - both tables look similar, but the HTML code behind each is vastly different. (You may need to resize the page to display it carefully.) Note also that this page does link to an external style sheet. Notice how the content in the second paragraph has remained unaffected by the style sheet. To change the apperance of your website using non paragraph based coding techniques would require many hours of work. However, if paragraphs are used, it's as simple as changing a style sheet.

Click here to view the same page without using an external style sheet.

Using Paragraphs to Organize Content.

<H2>Old Time Declensions.</H2> (Paragraph Block)

<H3>Second Person Singular</H3> (Paragraph Block)

<P> (Paragraph Block for Table)

{Table Content}

</P>

<H3>Second Person Plural</H3> (Paragraph Block)

<P> (Paragraph Block for Table)

{Table Content}

Old Time Declensions.

Second Person Singular

Nominative | Thou
Accusative | Thee
Possessive | Thy
Predicate Possessive | Thine

Second Person Plural

Nominative | Ye
Accusative | You
Possessive | Your
Predicate Possessive | Yours

Not Using Paragraphs to Organize Content.

<FONT SIZE="5"><B>Old Time Declensions.</B></FONT><BR>

<FONT SIZE="5"><B></B></FONT><BR>

<B><FONT SIZE="4">Second Person Singular</FONT></B><BR>

<B><FONT SIZE="4"></FONT></B><BR>

{Table Content}

<B><FONT SIZE="4"></FONT></B><BR>

<B><FONT SIZE="4">Second Person Plural</FONT></B><BR>

<B><FONT SIZE="4"></FONT></B><BR>

{Table Content}

Old Time Declensions.

Second Person Singular

Nominative | Thou
Accusative | Thee
Possessive | Thy
Predicate Possessive | Thine

Second Person Plural

Nominative | Ye
Accusative | You
Possessive | Your
Predicate Possessive | Yours


Table Functions

Menu and Toolbar

Tables are used in almost every well-designed webpage that you will come across today. The Table functions within HotDog Pro make using tables in your webpages simple and include:

  • the Table Wizard that makes creating complex tables a cinch;

  • a Quick Table feature that makes it easy for you to quickly create tables;

  • table, row and data cell code insertion


Frame Functions

Menu and Toolbar

Forms are used when authors want specific information from visitors to their website.

The Form functions within HotDog Pro include:

  • the Form Wizard that enables you to construct forms easily;

  • quick insertion of form elements into your webpage, including checkboxes; textboxes; file elements; hidden and password fields; radio, push, reset and submit buttons; text areas, lists and images.


Frame Wizard

Introduction

The Frames Tool in HotDog allows you to divide a browser window into multiple, independently scrollable frames of arbitrary layout, each of which can display separate HTML documents. That way, hyperlinks in one frame can be used to update the contents of other frames, making it possible for Web programmers to build visually pleasing, sophisticated WWW pages with easy-to-navigate user interfaces built in. Netscape's frame extensions also make it possible to launch multiple browser windows and to control the contents of each window through hyperlinks in other windows.

Starting the Frame Wizard.

  • On the Frame menu, select Frame Wizard.

How to Create a website using Frames

The HotDog Frames Wizard allows you to easily create a frames-based webpage on which several HTML documents can be displayed simultaneously in their own independently scrollable and resizable windows.

Hypertext links which appear on a page in one of these frames can then be modified with the "target" parameter so that the pages they link to appear in other frames, or take up the entire Web browser screen, or even appear in a new Web browser screen. This capability allows the user to create websites that are easy to navigate and maintain, whilst also being aesthetically pleasing.

Where is the Frames Wizard?

  • From the Frame menu, select Frame Wizard.

How To Create A website Using Frames

The following tutorial describes the steps taken to produce an example HTML document, "FrameIndex.HTML", using the HotDog Frames Supertool. This example document uses two frames to aid site navigation. The frame on the left-hand side of the browser window contains a number of buttons that act as hypertext links to various pages which, through the use of the "target" parameter, appear in the frame on the right-hand side of the browser window. The steps below can be used as a general guide for creating any site that uses frames.

  1. Before making a webpage with frames, the HTML documents that will appear in each of the frames on the page must be created. Pre-made pages for the example frames document we will create are listed and described below:

NOTE

These documents are stored in the HTMLHelp/Tutorials directory off the main HotDog directory. You can also access them with the website Resource Manager.

frametoolbar.HTML | The page displaying the toolbar with links to all the other webpages.
framewelcome1.HTML | The introductory page.
frameart1.HTML | Deals with Bosch's Art.
framehistory1.HTML | Deals with a history of Bosch's life.
framecontactme.HTML | A feedback page.

  2. Now start a new webpage in HotDog to insert the frames code into. To start a new page select ‘New’ from the ‘File’ menu in HotDog and then click on ‘Default HotDog Template’ in the screen that appears, or just click on the ‘New Document’ button in the File toolbar. A new document with beginning and ending standard HTML tags will appear on the screen. Save the document to the same directory as the example webpages listed in step 2 before adding anything to it by selecting ‘Save’ from the ‘File’ menu - call the new page "FrameIndex.HTML".

  3. Start the Frames Wizard by selecting ‘Frames’ from the ‘Insert’ menu

  4. The Frame Wizard will appear. Click on the ‘Next>>’ button to go to the next screen in the Wizard.

  5. Select ‘Columns’ from the ‘Arrange Frames by:’ drop down list. The number of frames is (conveniently!) set to "2" by default. Click on the ‘Next>>’ button to accept these settings and continue to the next screen in the Wizard.

  6. The Frames Wizard screen now being displayed is where frames are sized and their attributes are set. The frame on the left hand side is highlighted in blue to show that it is the frame whose attributes are currently being displayed. Resize this frame by using the mouse to drag the right hand edge of the frame towards the left hand side of the screen. You will see the width value change as you drag the frame. Drag the frame until the width setting is 16%.

  7. In the ‘Frame Name’ text field, type "toolbar".

  8. In the Frame URL field either type "frametoolbar.HTML" or use the ‘Browse’ button next to the text field to locate the HTML file.

  9. If you wanted a border around the page within this frame you would enter a pixel value in the Margin (W) and Margin (H) text fields. For the purposes of this tutorial however we will leave these fields blank.

  10. Select ‘No’ from the ‘Scrolling’ drop-down list to suppress the appearance of scroll bars within this frame (selecting ‘Yes’ will make the scroll bars appear regardless of whether they are needed whilst selecting ‘Auto’ will cause scroll bars to appear if the page to be displayed within this frame is larger than the frame).

  11. Leave the ‘Resizable’ check box unchecked to stop users from being able to resize the index frame.

  12. You have just finished defining the index frame. Now click on the right hand frame to specify its parameters.

  13. With the right hand frame highlighted in blue, enter the following attributes:

Frame Name | "mainpage".
Frame URL | Either enter "FrameWelcome1" or browse [image] to find this file and select it.
Margin (H) | Leave as 0.
Margin (W) | Leave as 0.
Scrolling | "Auto".
Resizable | Leave unchecked.

  14. You have now finished specifying the attributes of your frames page. To add the HTML code for these frames to your new page, click on the "Finish" button at the bottom of the Wizard screen.

  15. The code for the frames will then be added to your page and will resemble the following:

<frameset cols="16%, 84%">

<frame src="frametoolbar.HTML" name="toolbar" scrolling="no" NORESIZE>

<frame src="FrameWelcome1.HTML" name="mainpage" scrolling="no" NORESIZE>

</frameset>

  16. Delete the <BODY> and </BODY> tags from the frames Web page. The <FRAMESET> and </FRAMESET> tags which were added to your page are replacement tags for the <BODY> tags. If the <BODY> tags are not removed then the frames will not display on some browsers. Save your page.

  17. You have now created a page called "FrameIndex.HTML" which contains two frames; one called "toolbar" and one called "mainpage". The first frame, "toolbar", displays a webpage called "frametoolbar.HTML". The second frame, "mainpage", contains a page called "FrameWelcome1.HTML".

If you examine the HTML code in the "frametoolbar.HTML" page you will notice that the links it contains include a TARGET parameter, such as in the following example:

<a href="FrameContactme.HTML" target="mainpage">

<img src="Graphics/contact_me.gif" border=0>

</a>

This target parameter tells the browser to make the specified link, "FrameContactme.HTML", appear in the frame called "mainpage". Click here for further explaination of targets.

So the links in the toolbar frame cause pages to appear in the mainpage frame, because each link on the page "frametoolbar.HTML" which appears in the toolbar frame contains a target parameter specifying "mainpage" as the frame to display the link in.

The steps outlined above can be used as a guide for creating any frames-based page.

Click here to view the demonstration webpages. (Note - you may have to resize the help window.)


Form Functions

Menu and Toolbar

Forms are used when authors want specific information from visitors to their website.

The Form functions within HotDog Pro include:

  • the Form Wizard that enables you to construct forms easily;

  • quick insertion of form elements into your webpage, including checkboxes; textboxes; file elements; hidden and password fields; radio, push, reset and submit buttons; text areas, lists and images.


Forms, Overview

Introduction.

HTML forms closely resemble their paper counterparts, containing boxes for users to write in. Forms are used when you want complex feedback from visitors to your Website. You have probably used forms on other peoples Websites in the past. They consist of text boxes for you to type in, little check boxes and a few other ‘elements’. An element is the name given to any individual part of a form, such as a text box or submit button.

Every form element has properties or attributes. These attributes control how the form element will look, and what information it will return.

Generally, when a user submits a form, the form is sent to a special program on your server (a CGI script), which interprets the form before sending it on to you. You can however make the form send its output directly to you using the MAILTO command (e.g. <FORM ACTION=”mailto:elise@woodnet.com”>). Forms utilizing the MAILTO command can not be used by visitors using Microsoft Internet Explorer. However, there are solutions to this problem which are explained in discussion and background of forms.

What do you want to Do?

Create a Form Using the Form Wizard.

Learn More about Forms and How They Work.


Starting the Forms Wizard

Forms Wizard

Starting the Forms Wizard...

  • On the Form menu, select the Form Wizard.

Back to Form Wizard Help


Forms, Wizard

Introduction.

The Form Wizard is designed to help you create forms of your own. Each of the 10 form elements is listed down the left side of the Wizard.

Click on the form element you want to add to the Design Pad. As you add each new form element, you will be prompted to define the attributes of that element. For example, if you are adding a text box, you will be asked to specify the text box name, size and default text. For a full description of each form element, and what each of the attributes are, click on the 'Related Topics' button below and select the form element for which you want help.

After designing the layout of your form you need to specify where the completed form results are to be sent. You have a choice of an e-mail address or a URL. If you choose an e-mail address the form results in their raw form are sent to the e-mail address you specify. (Note: This does not work for users of Internet Explorer.) Alternatively, if you choose a URL you need to specify the address of the CGI script that is going to receive and process your form. You will be asked to specify the METHOD, URL (or action) and the ENCTYPE.

What do you want to do?

Start the Form Wizard.


Forms, Example

Example Form

Do you own a computer?
Do you use Windows 95?

If you are a member of the Nephilim Society, please enter your password below:

Have you read any books by Jonathan Dee?
Yes
No

Would you recognize the 'yellow sign'?
Yes
No

Have you read any of the following books?

Which book was your favorite?

How could I improve this Website?

Source Code

<HTML>

<HEAD>

<TITLE> Test Forms Document </TITLE>

</HEAD>

<BODY>

<H2> Example Form Program </H2>

<FORM METHOD="POST" ACTION="MAILTO:you@your.email.com">

<INPUT TYPE=HIDDEN NAME="form_information" VALUE="Tomais Norton Survey. Form created on 8/8/97">

<INPUT TYPE="checkbox" NAME="Own_Computer?" CHECKED> Do you own a computer? <BR>

<INPUT TYPE="checkbox" NAME="WIN_95"> Do you use Windows 95? <BR>

<BR>

<BR>

If you are a member of the Nephilim Society, please enter your password below: <BR>

<INPUT TYPE="password" NAME="password_box" SIZE=8 MAXLENGTH="8"> <BR>

<BR>

<BR>

Have you read any books by Jonathan Dee? <BR>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="Yes">Yes <BR>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="No">No <BR>

<BR>

<BR>

Would you recognize the 'yellow sign'? <BR>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="Yes">Yes <BR>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="No" CHECKED>No <BR>

<BR>

<BR>

<INPUT TYPE="text" NAME="namebox"
VALUE="Enter your name here..." SIZE="40"
MAXLENGTH="25"> <BR>

<BR>

<BR>

Have you read any of the following books? <BR>

<SELECT NAME="Book_Read" MULTIPLE SIZE="5">

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION> Journal of Tomas Norton

<OPTION> The Magus

<OPTION> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

<BR>

<BR>

Which book was your favorite?<BR>

<SELECT NAME="Favorite_Book">

<OPTION VALUE="None_Read" SELECTED> Have not read any books

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION> Journal of Tomas Norton

<OPTION> The Magus

<OPTION VALUE="Abramelin"> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

<BR>

<BR>

How could I improve this Website? <BR>

<TEXTAREA NAME="thoughts" ROWS="4" COLS="40"> Please enter your thoughts here...</TEXTAREA>

<BR>

<BR>

<INPUT TYPE="reset" VALUE="Clear All">

<INPUT TYPE="submit" VALUE="Send!!!" >

</FORM>

</BODY>

</HTML>


Forms, Element - Check Box

Form Element, Check Box

Use:

Check boxes are used to present a user with a yes/no choice. Each check box has its own name as specified by the NAME property. You should make this name meaningful so you can decipher the user's response. (See discussion and background for more details).

Properties:

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Required | The name of the check box.
VALUE=" " | Optional | The default value is ‘on’ if the box is checked. You can change this value by entering your own.
CHECKED | Optional | Makes the check box checked by default.

Example HTML:

1. <INPUT TYPE="checkbox" NAME="Own_Computer?" CHECKED> Do you own a computer?

Do you own a computer?

2. <INPUT TYPE="checkbox" NAME="WIN_95"> Do you use Windows 95?

Do you use Windows 95?

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - File

Use

The input file element allows visitors to attach files to the form they are submitting. Presently neither Netscape nor MS Internet Explorer support the file element. (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Required | The name of the File element.
ACCEPT=" " | Required | The type(s) of files that will be accepted as attachments.

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Hidden

Use

The hidden element is used by the form creator (you) rather than a visitor to your website. The hidden text box is not visible on the visitor’s browser. When a visitor submits their form, all the information in the VALUE property of the hidden element is also submitted with it. This information usually consists of notes to yourself such as the build of your form, what the form is, where you put it etc. (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Required | The name of the hidden text box.
VALUE=" " | Required | The data or information that is submitted with the form.

Example

<INPUT TYPE=HIDDEN NAME="form_information" VALUE="Tomas Norton Survey. Form created on 8/8/99">

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Image

Use

The image element is not commonly used. Essentially it is a submit button that uses a graphic instead of text. The button, as well as submitting all the data in the form, returns the mouse’s position on the graphic when clicked. It returns 0,0 if the visitor clicks on the top left of the graphic, and the horizontal size and vertical size of the image if clicked on the bottom right of the graphic. (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED | DESCRIPTION
NAME=" " | Optional | The name of the submit button.
SRC=" " | Required | The location of the Image to be used as the submit button. The syntax is identical to the IMG SRC tag. (c.f. Absolute and Relative References )

Example

<INPUT TYPE="image" NAME="image_submit" SRC="poses.gif">

NOTE

For this example to work it must be inside form tags <FORM .. ..> .. .. </FORM>. The entire form code, including all the examples, is ready for you to use.


Forms, Element - List Box

Use

The 'select' element is used for menus. There are two different menus; scrollable menus and drop down lists (see below). Each item in a menu is called an option and each option has its own properties. (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
MULTIPLE=" " | Optional | Defines a scrollable list.
SIZE=" " | Optional | If you are using a scrollable list, the size property defines how many options are displayed.

Option Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
SELECTED | Optional | Displays the default option.
VALUE=" " | Optional | Instead of returning the text after the Option tag, the VALUE text is returned.

Example - Scrollable Menu

Have you read any of the following books?<BR>

<SELECT NAME="Book_Read" MULTIPLE SIZE="5">

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION> Journal of Tomas Norton

<OPTION> The Magus

<OPTION> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

Example - Drop Down List

Which book was your favorite?<BR>

<SELECT NAME="Favorite_Book">

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION SELECTED> Journal of Tomas Norton

<OPTION> The Magus

<OPTION VALUE="Abramelin"> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

Which book was your favorite?

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Password

Use

Password boxes are just like text boxes, but any characters the user inputs are represented as asterisks. They are used for the entry of confidential information such as credit card numbers, wages or passwords. (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Required | The name of the password box.
SIZE=" " | Optional | Specifies the size of form element in characters.
MAXLENGTH=" " | Optional | Specifies the maximum amount of characters a visitor can enter into the password box.
VALUE=" " | Optional | Specify a default password (for example, Visitor).

Example

Please enter your password below:<br>

<INPUT TYPE="password" NAME="password_box" SIZE=8 MAXLENGTH="8">

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Radio Button

Use

Radio buttons are the little circles that are clicked in forms. They are best utilized when you want to make the user make one selection only from a multitude of choices. c.f. Check Boxes. (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Required | As the visitor can only select one choice from a group of radio buttons, all radio buttons in the same group must have the same Name. (See example below).
VALUE=" " | Required | The text that will be returned to you when the user selects a choice. Clearly this text should be different for every radio button.
CHECKED | Optional | Checks one of the radio buttons by default.

Example

Have you read any books by Jonathan Dee? <BR>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="Yes">Yes<br>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="No">No<br>

<br>

Would you recognize the 'yellow sign'? <BR>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="Yes">Yes<br>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="No" CHECKED>No<br>

Have you read any books by Jonathan Dee?
Yes
No

Would you recognize the 'yellow sign'?
Yes
No

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Reset Button

Use

The reset button returns every element in your form to its default value. (See discussion and background for more details.)

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
VALUE=" " | Optional | By default, the text on the Reset button reads ‘Reset’. However, this text can be changed by using the VALUE property.

Example

<INPUT TYPE="reset" VALUE="Clear All">

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Submit Button

Use

The submit button allows a visitor to send their completed form to you (as you defined in the FORM METHOD properties section). (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Optional | When the user submits the form, no message usually accompanies the data. However, using the name option, the name of the submit button can also be included in the submitted data. See example below.
ACCEPT=" " | Optional | By default, the text on the Submit button reads ‘Submit’. However, this text can be changed by using the VALUE property.

Example

What did you think of my Website?

<INPUT TYPE="submit" NAME="Loved_it" VALUE="Loved it">

<INPUT TYPE="submit" NAME="Hated_it" VALUE="Hated it">

This form returns all the other form data, as well as which submit button was used to submit the form.

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Text Box

Use

A text box allows a visitor to enter a single line of text into a form and then submit it to you. (See discussion and background for more details.)

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Required | The name of the text box.
SIZE=" " | Optional | Specifies the size of form element in characters.
MAXLENGTH=" " | Optional | Specifies the maximum amount of characters a visitor can enter into the text box.
VALUE=" " | Optional | Specifies default text to appear in the text box.

Example

<INPUT TYPE="text" NAME="namebox" VALUE="Enter your name here..." SIZE="40" MAXLENGTH="25">

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Forms, Element - Text Area

Forms, Elements - Text Area

Use

Text Areas are used when you want extended feedback from a visitor. Otherwise they are just like Text boxes. (See discussion and background for more details).

Properties

ATTRIBUTE | REQUIRED? | DESCRIPTION
NAME=" " | Required | The name of the text box.
ROWS=" " | Required | The number of rows of text the text area spans.
COLS=" " | Required | The number of characters the text area spans.
Default Text | Optional | Displays text in the text box area. Note: This option is not standard, see below for an example.

Example

<TEXTAREA NAME="thoughts" ROWS="4" COLS="40"> Please enter your thoughts here...;/TEXTAREA>

NOTE

For this example to work it must be inside form tags (<FORM .. ..> .. .. </FORM>). The entire form code, including all the examples, is ready for you to use.


Introduction: Using Styles

Why use Styles?

When the Internet was first used, its primary use was to distribute linked information. As such, the formatting of webpages was not given much consideration. As time went on, more and more people wanted to make their webpages look interesting. Unfortunately, they were limited by the few HTML tags devoted to formatting. In its basic form, HTML only provides a few formatting tags such as heading tags (H1 - H6) and simple character formatting tags (bold, italics, etc.). The initial response to this situation was made by companies developed web browsers. Netscape and Microsoft designed their own custom tags for people to use. This resulted in webpages that could be viewed under one browser, but not another.

In December 1996, the World Wide Web Consortium created style sheets. Style sheets allow authors to separate the form and appearance of their webpages from its content.

What does this actually mean? The content of your webpage is the basic text and various media you use. The form and appearance of your webpage is related to things like text colors, sizes of headings, etc. For example, if you are using the HotDog help reader to view this file and you have Microsoft Internet Explorer installed, you are currently viewing this webpage with the help of style sheets. The main heading above Using Style is the default appearance of the H1 tag. To view this page without style sheets, change the browser you are using to one that doesn't support style sheets. When you change browsers, note that the structure and content of the webpage doesn't change, only the way various bits of text are formatted. This is what is meant by separation of content and form.

Why Separate Content from Form?

One of the key advantages to separating content and form is the reusability of the style definitions. If you store all the formatting instructions in a separate file - and link all your webpages to this file, then you can change the form and appearance of your entire web site by changing only one file. For example, all documents in this help are linked to a file called HotDog6.css. This file contains all the style information. (You can look at this file and even edit it yourself using the Style Sheet Resource Manager).

NOTE

  • To use HotDog, it is not necessary for you to understand the code by which style sheets are defined. However, we have included an advanced discussion that goes into more detail and containing links to various Internet resources for your edification.

What is "Formatting"?

Formatting a webpage (or indeed, any text) has two aspects: content and the presentation of content. For example, in a newspaper, the content is all the words and the formatting is the different font styles and layout applied to the headings, paragraphs and images. Formatting provides important visual (non-textual) clues to a reader about the way to read an article, what bits are important, what themes are being discussed etc. For example, in this help I use a blue background to indicate a heading.

Like a newspaper, a webpage should use formatting on various parts of text to guide readers through the process of understanding its content.

How is Text Formatted in a Webpage?

Text can be formatted in two ways on a webpage:

  • Using HTML Tags.

  • Using Style Sheets.

Using Formatting Tags or Style Sheets to control the Appearance of Your Webpage

The last issue that must be addressed relates to whether style sheets should be used on your website. After all, much of the formatting that style sheets perform can be duplicated using formatting HTML tags, such as <FONT>, <B>, <I>, <U> etc.

Here are some ideas you should consider:

  • Not all users' browsers are able to render style sheets - however, if you are careful when associating style definitions with tags, the resulting form of your webpage should still be acceptable.

  • Every time you use HTML tags to define formatting (e.g. <I>), you lose some separation of your webpage's content from its form. This has disadvantages as discussed above.

One solution is to use style sheets for your webpages, but for character formatting (that is the formatting of words within a paragraph, but not paragraphs themselves) use both styles and the old HTML tags (such as <I> etc.) to duplicate the effect you want. The Format Font Dialog and Format Paragraph Dialog can automatically generate these HTML tags for you when you define your style. If you are new to styles, just use these dialogs until you are familiar with the syntax.

Related Topics

Further Discussion.

Using the Format Character Dialog.

Using the Format Paragraph Dialog.

Using the Style Sheet Resource Manager.


Style Sheets - Further Discussion

Introduction

If you have read the introduction to style sheets you will know the reasons why style sheets were invented - mainly to separate a webpage's content from its form. This discussion is designed to teach you how style sheets are actually written. You don't need to read this help in order to use style sheets in HotDog. The Style Sheet Resource Panel lets you use the power of style sheets without having to understand how they work :-)

Basics of Styles.

A style sheet is a set of rules or instructions for the web browser, telling it how to render HTML tags. Designing simple style sheets is easy. One needs only to know a little HTML and some basic terms. For example, to set the text color of H2 elements to red, one can say:

H2 { color: red }

The example above is a simple CSS (Cascading Style Sheet) rule. A rule consists of two main parts:

  1. Selector (e.g., H2) and

  2. Declaration (e.g., color: red).

The Selector can either be a:

  • Simple Selector, which matches elements based on the element type and/or attributes (e.g., H2, as in the case above), or a

  • Contextual Selector, which consists of several simple selectors (e.g., H2 B or H2 B I). A contextual selector matches elements based on their position in the document structure.

The Declaration has two parts:

  1. Property (e.g., color) and

  2. Value (e.g., red).

While the example above tries to influence only one of the properties needed for rendering a HTML document, it qualifies as a style sheet on its own. Obviously, you can change far more than the color of text. Combined with other style sheets, you can determine the final presentation of your webpage.

If you are new to styles, use the Style Sheet Resource Manager and Format Font or Format Paragraph dialogs to create styles until you are familiar with the syntax. If you want to get right down to it, the entire style sheet specification can found at the World Wide Web Consortium.

Both webpage authors and viewers can influence the presentation through style sheets. By default, a web browser draws different tags in different ways (take for example H1, H2 - H6). You can tell the browser to render some tags differently.

Sometimes conflicts will arise between the style sheets that influence the presentation. A discussion on the style definitions that end up taking precedence is covered in the section further below on Cascading Order.The remainder of this discussion explores how these style definitions can be written and how they are integrated into your HTML pages.

There are three ways of using styles in HotDog:

  1. External Style Sheets: External style sheets store all the style information in a separate file - that is, linked to by each webpage.

  2. Document Styles: Document style definitions store the style information in its entirety at the top of each webpage.

  3. Inline Styles: Inline style definitions store the style information in the tag to which it applies - it will affect no other tags.

External Style Sheets.

One way of storing all the style definitions is to place them in a separate file that is linked to by all the HTML documents in your web site. This gives you the ability to change the entire appearance of your website by editing only one file. The style definitions are stored in a file with a .CSS extension and the Style Sheet Resource Panel is designed to make the process of creating these .CSS files as simple as possible (follow the tutorial for more details).

External Style Sheet files are linked to in much the same way images are, however, the link is specified within the HEAD tags, using the LINK tag:

<HTML>
<HEAD>
<TITLE>My Webpage</TITLE>
<LINK REL="StyleSheet" HREF="styles/HotDog5.css">
</HEAD>
<BODY>
<H1> Demo Heading</H1>
</BODY>
</HTML>

The LINK tag uses two attributes:

  • REL - this indicates what is being linked to.

  • HREF - this indicates the location of the file being linked to.

The style definitions have a slightly different syntax when stored in an external file compared with an inline style definition. Below is the external definition used for the H1 tag - (used throughout this help).

H1 { font-family : "Tahoma";
font-size : 14.0pt;
background-color : #1465FA;
text-align : center;
color : white;
border : solid purple 1.0pt;
margin-left : 70.0px;
margin-top : -5.0px;
margin-bottom : 6.0mm;}

Further style definitions are simply added above or below this definition. Click here to view the HotDog6.css file.

Document Wide Style Definitions

A document wide style definition actually resides within the document that it affects. Consider the following example:

<HTML>
<HEAD>
<TITLE> document wide style example </TITLE>
<STYLE TYPE="text/css">
<!-- /* Style Sheet definitions need to be commented to hide them from incompatible Browsers.*/
H1 {color: green;} /* End Style Sheet commenting. */ -->
</STYLE>
</HEAD>
<BODY>
<H1>Green Heading</H1>
</BODY>
</HTML>

Once again, the Style Sheet Resource Manager lets you easily create and manage your style definitions - and allows for the easy conversion of external style sheet declarations into document wide style declarations.

Inline Styles

Inline style definitions apply only to the tag in which they are defined. The following simple example shows an inline style definition for the H4 tag.

Below is the default rendering of the H4 tag:

Default rendering of the H4 tag.

The following HTML code shows an inline style definition used to adjust the browser's rendering of the H4 tag:

<H4 style="{color : green;}"> H4 heading with style... </H4>

The result is:

H4 heading with style...

In the example above, only the text "H4 heading with style..." would appear green - all other H4 headings would appear as usual. The Format Font or Format Paragraph dialogs help you to easily create inline styles.

Cascading Order

More than one style or style sheet can influence the presentation of your HTML document simultaneously. If you make extensive use of style sheets, you will want the ability to overwrite some style definitions (that is - have another style definition that takes precedence). Therefore, when defining your styles or creating your own style-sheets, you should be aware of the Cascading Order that is used to determine precedence.

The precedence of a style definition is based on each style rule having a weight. The following algorithm determines precedence:

1. Find all declarations that apply to the element in question.

Specified declarations only apply if the selector matches the element in question.

For example, assume the color property of H2 elements are set to the value red as follows:

H2 { color: r ed }

The specified declaration, color: red, will only apply if the selector H2 is applied to a text element. Therefore, this declaration would be ignored if the element in question was, say, an image, since the H2 selector would not be applicable.

If the declaration doesn't apply then the inherited value is used.

To demonstrate, suppose now that there is a H2 element in your HTML document with a bolded element inside, as follows:

<H2>This message is <B>extremely</B> important!</H 2>

If no color has been assigned to the B tag, the bolded word "extremely" will inherit the color of the parent element. That is, it will also appear in red, as follows:

This message is extremely important!

Other style properties are inherited in the same way, though sometimes style properties are not inherited from the parent element to the child element. Usually, it's intuitive as to why properties aren't inherited. For instance, the background property doesn't inherit, since the parent element's background appears by default anyway.

If there is no inherited value, the initial value is used. (This is the case for the HTML element and for other properties that don't inherit.)

2. Sort the declarations by explicit weight.

By default, the weights of the viewer's rules are less than the weights of rules in the author's documents. That is, if there are conflicts between the style sheets of a webpage that a viewer is loading on to their browser and the viewer's own style sheets, the author's rules will be used. (Both viewer and author rules override the web browser's default values.)

You can also increase the weights of your declarations within your own document. Declarations marked ! important carry more weight than unmarked (normal) declarations.

In the example below, the first three declarations have increased weight, whereas the last declaration for font-style has normal weight.

H2 { color: red ! important; background:blue ! important }

P { font-size: 10pt ! important; font-style: italic }

A viewer's rule with an important declaration will override an author's rule with a normal declaration. An author's rule with an important declaration will override a viewer's rule with an important declaration.

Any rules specified in the style sheet itself override rules in imported style sheets. That is, imported style sheets are lower in the cascading order than rules in the style sheet itself.

3. Sort by origin

As with style rules, the author's style sheet override the reader's style sheet, which override the web browser's default values. An imported style sheet has the same origin as the style sheet from which it is imported.

4. Sort by specificity of selector.

The declarations for more specific selectors will override more general selectors. For example the declarations for the selector H2 B would override the declarations for the selector H2.

5. Sort by order specified.

If two rules have the same weight, the last rule specified takes precedence (that is, the nearest rule enclosing the element). Rules in imported style sheets are considered to be before any rules in the style sheet itself.

This rule also applies to other tag attributes, as shown in the two examples below, which uses an inline STYLE with the SPAN tag and the COLOR attribute in the FONT tag.

This code:

<SPAN STYLE="{color : red;}" >

<FONT COLOR="PURPLE" >Test </FONT>

</SPAN>

will produce purple text, since the FONT tag contains the nearest color rule enclosing the text. Whereas this code:

<FONT COLOR="PURPLE" >

<SPAN STYLE="{color : red;}" >test</SPAN>

</FONT>

will produce red text.

To make things as easy for you as possible, if you use the Format Font Dialog to specify tag effects, a message appears in the dialog to let you know whether your regular tag effects or your inline styles will take precedence.

On a final note, the search for the property value that takes precedence ends whenever one rule has a higher weight than the other rules that apply to the same element.

If you wish to specify a default style property for a document, you can set the property on an element that all other elements descend from. For example, the BODY element can serve this function in your HTML document, as follows:

BODY { color: red; background: url(background_picture.gif) blue}

The example above sets the text color to be red and the background to be an image. The background will be blue if the image is not available. This example will work even if you don't have the BODY tag in your document since the HTML parser will infer the missing tag.

Related Topics

Using the Format Font Dialog.

Using the Format Paragraph Dialog.

Using the Style Sheet Resource Manager.

World Wide Web Consortium.

Web Design Groups CSS tutorial.


Formatting Using Styles

What is "Formatting"?

A webpage (or indeed, any text) has two parts, content and the presentation of content. For example, in a newspaper the content is all the words, the formatting is the different font styles and layout applied to headings, paragraph and images. Formatting provides important (non textual) visual clues to a reader about how to read an article, what bits are important, what themes are being discussed etc. For example, in this help I use a blue background to indicate a heading.

Like a newspaper, a webpage needs to use formatting on various bits of text to guide readers through the process of understanding its content.

What are the Different Ways Text can be Formatted in a Webpage?

There are two ways that text can be formatted in a webpage:

  • Using HTML Tags.

  • Using Style Sheets.

There are three ways of using styles in HotDog:

  1. Inline Styles: Inline style definitions store the style information in the tag to which it applies - it will affect no other tags.

  2. External Style Sheets: External style sheets store all the style information in a separate file - that is, linked to by each webpage.

  3. Document Styles: Document style definitions store the style information in its entirety at the top of each webpage.

If you are new to styles, try using the Format Font and Format Paragraph dialogs (instructions below) until you are familiar with the syntax.

For a discussion on the relative benefits of each, see the discussion about Using Styles.

Character Formatting

To format a character:

  1. Select the text you want to format (including any formatting tags such as B, SPAN etc).

  2. From the Format menu, select Font.

  3. Using the Format Font window, edit your text.

  4. Click OK to format your font.

Using the Format Character Dialog.

Paragraph Formatting

Any formatting applied to a paragraph (H1, H2, H3) affects all the characters within that paragraph (with the exception of characters specifically formatted as above). To format a paragraph:

  1. Select the paragraph you want to format (including any formatting tags such as H1, DIV etc).

  2. From the Format menu, select Paragraph.

  3. Using the Format Paragraph window, edit your text.

  4. Click OK to format your font.

Using the Format Paragraph Dialog.

ASIDE

Even in books, plain text contains formatting, such as spaces between words and a regular line size. (Usually dictated by the physical size of the page :-)


Exporting Styles Into Your HTML Documents

Applying Styles To Your HTML Documents

Introduction

There are several options you can use when applying Style Sheets from within the "Apply Style Sheet" dialog. These are linking your HTML documents to an external style sheet, defining the style definitions at the top of your document or finally inserting a style definition into a tag directly. For more details regarding these different style definitions, see "Style Sheets, Further Discussion".

Linking HTML Documents To A Style Sheet.

If your style sheet declarations are stored in an external file, then by linking your HTML documents to this file, your webpages will be automatically formatted in the styles you have created.

  1. In the View menu, select Resource Manager.

  2. In the Resource Manager submenu, select Cascading Style Sheets.

  3. The Cascading Style Sheets resource panel will then appear. In this panel locate and select the style sheet you wish to use.

  4. Right-click and select Apply Style to Document(s)..

  5. The Apply Style Sheet dialog will now appear. Choose one of the followin options:

  • Link Document(s)/Website to selected Style Sheet

Choosing this option allows you to link the selected style sheet to your HTML documents. Your webpages will then be automatically formatted in the specified styles.

  • Insert Style Contents into Document

Choosing this option inserts the style definitions of the selected style sheet at the top of your document. The specified webpages will then be formatted in the selected styles. Unlike linked style sheets, a document wide style definition resides within the document that it affects.

  6. Use the drop down list to choose the HTML documents that you want link to the style sheet:

  • Currently Selected HTML Document.

By choosing this option, your style sheet will be linked to or inserted into the currently opened and selected HTML document.

  • All Opened HTML Documents.

By choosing this option, your style sheet will be linked to or inserted into all currently opened HTML documents.

  • All Documents In A Website.

This option is only available if you chose to link your style sheet in step 5 above. By choosing this option, you will be prompted to select a the website that you want linked to the style sheet. (NOTE: Make sure you have the website you want to modify open in HotDog.)

  • All Documents In A Directory.

This option is only available if you chose to link your style sheet in step 5 above. If you selecting this option you will be prompted to enter a directory on your computer containing the HTML documents you want linked to the style sheet.

NOTE

  • All sub-directories will be parsed for documents as well as the directory you select.

  • Be careful not to select a directory containing a HotDog website. If you want to add or remove style sheets to a website, use the website resource panel.

Exporting Document Wide Styles.

Any styles declarations will be inserted in the top of your document. This type of style declaration is not commonly used. For more details "Further Discussions on Style Sheets".

Exporting Inline Styles.

This option allows you to insert the currently selected style definition into your document. Where the style definition is inserted is defined by the selection you make from the drop down list:

SPAN Tag

The style definition will be exported into your currently opened document as a SPAN tag. The style will be wrapped around your cursor and/or any selected text.

DIV Tag

The style definition will be exported into your currently opened document as a DIV tag. The style will be wrapped around your cursor and/or any selected text.


Import Style Sheet

Introduction

The Cascading Style Sheet resource manager stores all your external style sheets, so that you can easily edit and link them to your websites. You don't need to use the Cascading Style Sheet resource manager if you don't want to - (see Style Sheets Introduction) it is only a tool to help you create and edit style sheets. If you want to use the Cascading Style Sheet resource manager, then you have to tell it where your styles are. To do this, use the Import Style Sheet wizard.

How to Import a Style Sheet

First open the "Import Style Sheet" wizard:

  1. From the View menu, select the "Resource Manager" sub-menu.

  2. In the Resource Manager sub-menu, select "Cascading Style Sheets".

  3. In the top left of the Cascading Style Sheets Resource Manager, click [image].

  4. Click the [image] button to select a style sheet to import.

  5. Click "OK".

NOTE

The Cascading Style Sheet Manager only supports level one style sheets. For advanced style sheet features - use the CSS Property Sheet.


Creating External Style Sheets

Step-by-Step Instructions

  1. From the View menu, select Resource Manager.

  2. From the Resource Manager submenu, select Cascading Style Sheets.

  3. The Cascading Style Sheets resource panel will then appear. Do one of the following:

  • Click on the Create Style Sheet button:

  • Right-click anywhere in the Cascading Style Sheet resource panel and select Create Style Sheet.

  4. Enter a name for your new style sheet.


Step-by-Step Style Sheet Tutorial

Introduction

This tutorial shows you how to create and edit a style sheet using the Cascading Style Sheet resource panel. Following the steps below you will create a new style sheet, link it to a document and then define a few styles.

Step 1. Creating A New Document.

Assuming you have started HotDog, close all the open documents.

  • From the Window menu, select "Close All".

Now to start afresh, create a new document by doing one of the following:

  • Press <CTRL> + N.

  • Click the [image] button on the "File" toolbar.

Add the following text to your document, between the BODY tags:

<H1> This is My Main Heading </H1>

<H2> This is My Secondary Heading </H2>

<H3> This is My Tertiary Heading </H3>

<P> This is a simple paragraph of text </P>

<P> A link to <A HREF="http://www.sausagetools.com">Sausage Software</A></P>

Save your document:

  1. From the File menu, click "Save As..."

  2. Use the Save As dialog to navigate to the "HTMLFiles" directory (under the HotDog6 directory).

  3. In the "File Name" box enter the name "StyleSheetDemo".

  4. Click "Save".

Step 2. Opening the Cascading Style Sheet Resource Panel.

The Cascading Style Sheet resource panel helps you create and control style sheets. To open it:

  1. From the View menu, select the "Resource Manager" sub-menu.

  2. From the Resource Manager sub-menu, select "Cascading Style Sheets".

Step 3. Creating a New Style Sheet.

Firstly we will create a new style sheet by doing one of the following:

  • Click the [image] button.

  • Right click in the Cascading Style Sheet resource panel and select "Create Style Sheet".

After doing this a prompt will appear asking you to specify a name for your new style sheet.

  • Enter the text "Demo1" into the "Create New CSS File" dialog.

Notice that the Cascading Style Sheet Resource Manager now lists "Demo1.css" under "HotDog6 Default Style Sheets". Before adding any style definitions to this style sheet, let's link the style sheet to your new document "StyleSheetDemo.HTML".

Step 4. Linking the Style Sheet to Your Document.

Your style sheet will contain instructions for the browser, telling it how to render your different headings. However, you first of all must tell the browser where the style sheet is stored. This is known as linking a style sheet to your document.

To link the style sheet "demo1.css" to your new document "StyleSheetDemo.HTML" follow the steps below:

  1. In the Cascading Style Sheet Resource Manager, right click on the style sheet "demo1.css".

  2. Select "Apply Style To Documents(s)...".

    This opens the "Apply Style Sheet" window.

  3. In the "Apply Style Sheet" window select "Link docs. (or a website) to selected style sheet".

  4. Click "Next".

  5. In the drop down list select "Currently Selected HTML Document".

  6. Click "Finish".

Notice that HotDog has inserted the following code into your document:

<LINK REL="STYLESHEET" HREF="..\css\demo1.css" TYPE="text/css" >

This tells the browser where your style sheet is stored.

Try previewing your document (Press F9).

You will notice that your document appears as normal. This is because although the style sheet is linked to your document, it does not yet contain any styles. Step 5 will show you how to add a style definition to a style sheet.

Step 5. Adding a Style Definition to the Style Sheet.

The first thing we are going to do is change the appearance of the H1 tag.

  1. In the Cascading Style Sheet resource panel, right click on the style sheet "demo1.css".

  2. Select "Create Style".

    The H1 tag is classified as a "paragraph" tag, as headings share a similar set of properties to paragraphs in terms of the type of effects that you can apply to them. Therefore, from the "Style Type" list, select "Paragraph Style".

  3. Click "Next".

  4. A list of a HTML tags is shown, click "Heading 1" and then click "Finish".

Notice that in the Cascading Style Sheet resource panel, under the "demo1.css" style sheet item, a new style definition item appears with the name "H1". The Style Editor window now opens. Read on for more details.

Step 6. Using the Style Sheet Wizard.

The Style Editor is designed to help you visually create and edit styles.

Although the Style Editor screen looks complicated, it is very easy to use. All you need to do is select the options that describe how you want text to appear when the tag that you're adding a style to is used in a HTML document.

The preview window in the bottom right hand corner of the Style Editor shows how your style definitions will affect text in a document when that text is surrounded by the tags that you are adding a style definition for.

The examples below are just some of the things you can do with styles. Feel free to experiment!

Changing the Color of the H1 Tag:

  1. In the left hand panel of the Style Editor, click on the "Font" item. Doing this causes a range of options to appear in the right hand side of the Style Editor. These particular options control the attributes of the font that text will appear in if it is surrounded by H1 tags.

  2. Under "Text Color" select "red".

  3. Under "Size" select "Enter Number". This allows you to specify a size for the text.

  4. Enter the number "10" into the "Size" field.

  5. Select "mm" from the size units just to the right of the "Size" field.

Notice how the preview window within the Style Editor updates to show how the options you have selected will affect text when it is surrounded by H1 tags.

Changing the Font of the H1 Tag:

  1. Click on the "Face" drop down list in the style editor screen.

  2. Select the option "Comic Sans MS" from the drop down list.

NOTE

Note, by clicking the [image] button, you can define font families and degradable fonts.

Making the H1 tag appear in Italics

  1. Click on the "Style" drop down list (NOTE: here the word "style" refers to a type of text effect, not a "style sheet") .

  2. Select "italic" from the list of options in the drop-down list.

Centering your Heading.

  1. From the left hand panel of the Style Editor screen, click on the "Paragraph" item. All the options that affect the paragraph positioning of your tag will appear in the right hand side of the Style Editor.

  2. At the top of the Style Editor screen, within the "Text Alignment" box, click on the "center" button.

Adding Borders to Your Tag.

  1. From the left hand panel of the Style Editor screen, click on the "Border" item. All the options that affect the borders of your tag will appear in the right hand side of the Style Editor.

  2. Use the drop down list boxes to create the borders you want. A preview of your changes will appear in the preview screen in the bottom right hand corner of the Style Editor screen.

Adding a Background Color to Your Tag.

  1. From the left hand panel of the Style Editor, click on the "Background" item. All the options that affect the background of your tag will appear in the right hand side of the Style Editor.

  2. Click on the color drop down list box and select a background color for your text.

Click on the "OK" button in the Style Editor screen to save the changes you have made to your style definition for the H1 tag.

Step 7. Using the HOVER Style Sheet.

The "HOVER" pseudo-class lets you make links that behave in a special way when a user places their mouse over a link. For example, place your mouse over here.

You are now going to create this effect using style sheets.

Add the following HTML text between the body tags of your stylesheetdemo.HTML document:

<A HREF="http://www.sausagetools.com">Test Link To Sausage </A>

Now preview your document (Press F9) - this preview will show how a link usually appears by default.

The first thing to do is to remove the default underline that appears under links. To do this we will add a style to the A tag.

  1. In the Cascading Style Sheet Resource Manager, right click on the style sheet "demo1.css".

  2. Select "Create Style".

  3. In the "Create Style" dialog, select "Character Style".

  4. Click "Anchor (Hyperlinks)".

  5. Click "Finish".

  6. In the Style Editor window that appears, make sure that you are looking at the "Font" options (click on the "Font" item in the left hand panel), and then within these options, click [image].

  7. Click "OK".

Preview your document once more - this time the link will appear with no underline.

Now we are going to define the "HOVER" Pseudo class - this allows us to define the style for the link when the mouse is over it.

  1. In the Cascading Style Sheet Resource Manager, right click on the style sheet "demo1.css".

  2. Select "Create Style".

  3. In the "Create Style" dialog, select "Character Style".

  4. Click "Next".

  5. Click "Anchor (Hyperlinks)".

  6. Click "Advanced".

  7. On the screen that appears, click the "Pseudo Class" check box. This will enable the "Pseudo Class" drop down list. Select the "HOVER" option from this drop down list.

  8. Click "Finish".

    The Style Editor window now opens - this style will define how the link appears when the user moves his or her mouse over your links.

  9. In the "Style Editor" window, under "Font", click [image].

  10. Click "OK".

Now preview your document once more (press F9) - when you move your mouse over the link you will notice that it becomes underlined. Try experimenting with different font styles, colors and sizes.


Tutorial: Using the Inline Font Dialog

Tutorial: Using the Format Font Dialog

Introduction

Inline styles are the recommended way for you to create different looking fonts on a webpage. This tutorial shows you how to use the Format Font dialog.

Step 1. Creating A New Document.

Assuming you have started HotDog, close all the open documents.

  • From the Window menu, select "Close All".

Now, start afresh by creating a new document by doing one of the following:

  • Pressing <CTRL> + N.

  • Click [image] on the "File" toolbar.

Add the following text to your document, between the BODY tags:

This is my sample Text.

Save your document:

  1. From the File menu, click "Save As..."

  2. Use the Save As dialog to navigate to the "HTMLFiles" directory (under the HotDog6 directory).

  3. In the "File Name" box enter the name "InlineStyleDemo".

  4. Click "Save".

Step 2. Selecting the Text.

Select the text you want to format:

  • In your document, double click the word "sample" to select it.

Step 3. Opening the Format Font Dialog.

Do one of the following:

  • Press F2

  • From the Format menu, click "Font".

Step 4. The Difference between Inline Styles and Font Tags.

Font tags are special tags (such as the <B> tag) that can be used to change the appearance of text. The World Wide Web Consortium recommends that people now use styles (or inline styles) to change the appearance of text.

To Change to the Inline Style Section of the Font Dialog:

  • On the left side of the "Format Font" window, click "Font".

Step 5. Changing the Appearance of your Text.

Use the boxes under "Inline Font Styles" to change the appearance of your text. A preview of your text (in this case "sample") appears at the bottom right of dialog. This preview displays to you how your text will appear on a users browser once inserted into your document.

Step 7. Applying the Font Changes to Your Document.

  • Click "OK" to insert the font changes into your document.

Your HTML text will now appear something like:

This is my <SPAN STYLE="{font-size : small; color : fuchsia; text-decoration : underline;}" >sample</SPAN> Text.

The text in red above defines your style.

To preview your text in a browser:

  • Press F9.

NOTE

Styles are not supported by older browsers (version 2 browser generally). You may want to also include Font Tags (see step 4 above) as well for backwards compatibility.


Tutorial: Using the Format Paragraph Dialog

Introduction

The Format Paragraph Dialog aids you in constructing webpages that are well structured. This tutorial will show some of the features of the Format Paragraph Dialog.

Step 1. Creating a New Document.

Assuming you have started HotDog, close all the open documents.

  • From the Window menu, select "Close All".

Now, start afresh by creating a new document by doing one of the following:

  • Pressing <CTRL> + N.

  • Click [image] on the "File" toolbar.

Step 2. Inserting a Paragraph.

  1. Enter a block of text between the body tags in your document.

  2. Using the mouse, select the text.

  3. From the Format Menu, click on "Paragraph".

  4. Click "OK".

This creates a simple paragraph. However, other paragraphs are commonly used - such as headings.

  1. Highlight your text (including the <P> tags) using the mouse.

  2. From the Format Menu, click on "Paragraph".

  3. From the Paragraph Style box, choose "H1".

  4. Click "OK".

Now preview your paragraph - it will appear as a heading.

Step 3. Creating a Style for a Paragraph.

The advanced features of the Format Paragraph Dialog use Inline Styles. Inline styles are special instructions with the paragraph tag you are using telling the browser to render the tag in a different way from normal.

  1. Highlight your text (including the <H1> tags) using the mouse.

  2. From the Format Menu, click on "Paragraph".

  3. From the "Format Paragraph" dialog - click "Font".

  4. From within the "Font" window choose a text color (red say) and a new font (Arial).

  5. Click "OK".

Preview your webpage again - and if you are using a browser that supports style sheets (and most do now days) your text will appear red and in a different font. Your HTML text should appear something like:

<H1 STYLE="{font-family : Arial; color : red;}">this is ma paragraph</H1>

Now we are going to add some borders to the text.

  1. Highlight your text (including the <H1> tags) using the mouse.

  2. From the Format Menu, click on "Paragraph".

  3. From the "Format Paragraph" dialog - click "Borders".

  4. From with in the borders window, select a style of solid, a padding of 5 pt and a color of purple.

  5. Click "OK".

If you preview your text again, you will discover that you have created the most hideous looking title ever - but we have demonstrated the power of inline styles at least.

Step 4. Creating a Few More Paragraphs.

In preparation for Step 5, create a few more paragraph blocks - they can be any paragraph type (i.e., H1-H6, P etc).

Step 5. Group Editing of Paragraphs.

Now use the mouse to highlight every paragraph you have created.

  1. From the Format Menu, click on "Paragraph".

  2. From the "Format Paragraph" dialog - click "Paragraph".

  3. From within the "Paragraph" window choose a new paragraph alignment - say center.

  4. Click "OK".

Now preview your document. Note that all your paragraphs have been centered but your original paragraph still retains its original settings.


Cascading Style Sheets

Introduction

HotDog supports CSS (Cascading Style Sheets) via the Cascading Style Sheets resource panel, and via the HTML Property Sheet resource panel.

HTML Property Sheet Resource Panel

For those experienced in editing style sheets manually, HotDog offers support for both level 1 and level 2 style sheets via the HTML Property Sheet. Using the Property Sheet, you can browse properties for CSS selectors and enter values for those properties. See the topic entitled "CSS Support" in the HTML Property Sheet section of this help file for more information on how to use this feature.

Cascading Style Sheets Resource Panel

The Cascading Style Sheets Resource Panel lets you create and edit level 1 style sheets.

This resource panel groups your style sheets together and lets easily you import, create, edit and apply styles and style sheets (using a simple graphical interface) as well as organize your styles between different directories. The Apply Style Sheet wizard makes the involved process of linking styles to individual documents, entire websites, entire directories or all open documents a simple matter.

You can also effectively control the look and form of your documents using HotDog Pro's new Font and Paragraph formatting dialogs.

Starting the Cascading Style Sheets Resource Panel

  1. From the "View" menu, select the "Resource Manager" submenu.

  2. From the "Resource Manager" submenu, click "Cascading Style Sheet".

To Insert a Style into a Document(s)

  1. Right click on the style or style sheet you want to insert.

  2. Select "Apply Style(s) To Document".

Follow the wizard to insert your styles into your document.

WARNING

Any level 2 style sheet information will be lost if the style sheet is imported into the Cascading Style Sheets Resource Panel. (Only a copy of your style sheet is imported however, so you will still have the original copy of the style sheet.) To edit level 2 style sheets, use the HTML Property Sheet resource panel.

For more details, see the Step-by-Step Style Sheet Tutorial.


Create New Style Definition

Introduction

The Create Style Dialog is helpful for creating new style definitons. If you would like to create style definitions that you can easily add to your document, these instructions show you how.

First you need to open the Cascading Style Sheets resource panel:

  1. In the View menu, select Resource Manager.

  2. In the Resource Manager submenu, select Cascading Style Sheets.

Now you need to create a new style sheet, which you can use to add style definitions.

  1. Do one of the following:

  • Click [image] .

  • Right-click in the Cascading Style Sheet resource panel and select Create Style Sheet.

  2. Enter a name for your new style sheet in the Create New CSS File dialog. Notice that the Cascading Style Sheet resource panel now lists the name of your new style sheet under HotDog6 Default Style Sheets. For example, if you named your style sheet my_own_styles then my_own_styles.css should appear.

You can now use this style sheet to define your own style definitions.

Adding New Style Definitions

  1. Select the style sheet to which you wish to add a style definition.

  2. Do one of the following:

  • Click [image] .

  • Right-click with your mouse and select Create Style.

  3. In the Create New Style dialog, use the drop-down list to select the type of tag for which you want to create a style. The options are:

Character Style

Selecting this option allows you to create a style for HTML tags that affect text within a paragraph, called inline style. Inline or Character Style HTML tags include such tags as <B>, <I>, and <A>.

Paragraph Style

Selecting this option allows you to create a style for HTML tags that affect the appearance of an entire paragraph. Paragraph Style HTML tags can't be used "inline" because they automatically force the text to which they apply to become a paragraph. That is, they add a carriage return before and after the text. Paragraph Style HTML Tags include tags such as <H1> and <DIV> and the attributes for the <P> tag.

Document Style

Selecting this option allows you to create a style for HTML tags that affect the appearance of an entire document. Document Style HTML Tags include the <BODY> tag and the attributes for the <A> tag.

Selector

A selector is a special type of style definition that can be applied to any tag using the CLASS attribute. For example, if you give the style def:

<SPAN CLASS="Selector_Name>text</SPAN>

Define Own Style

Select this option if you wish to define your own particular style.

  4. After selecting a style type, press Next.

  5. From the list that appears select the tag to which you want to define a tag.

  6. Click "Finish".

The Style Editor dialog now opens allowing you to create a style definition for your new style.

Advanced Features

These features let you create selector, psuedo selector and or contextual selectors. For more information see:

http://www.w3.org/TR/REC-CSS1.

Advanced Users of Style Sheets

  1. Select "Define Own Style" from the list box.

  2. Click "Next".

  3. Add your tag name. (It is not nessescary at this stage to include any selector, contextual selector or psuedo selectors at this stage).

  4. Click "Advanced".

  5. Define any classes you want.

  6. Click "Finish".


New CSS File

Introduction

A CSS file contains all your style definitions. A style definition is a set of instructions telling a browser how to render a paticular tag. For example, the following style definition tells a browser to render the H1 tag in red:

H1 {color : red};

To Create a New CSS File.

  1. From the View menu, select the "Resource Manager" sub-menu.

  2. In the Resource Manager sub-menu, select "Cascading Style Sheets".

  3. Near the top left of the Cascading Style Sheets Resource Manager, click [image].

  4. Enter the name of the new CSS file.

  5. Click "OK".


Menu and Toolbar System

Powerful Functionality

HotDog Pro has been designed so that you can access the functionality within the program as easily as possible:

  • Every HotDog Pro feature is accessible using our eleven-menu system.

  • Editing features can be accessed at the click of a button using our 10 pre-configured toolbars.

  • To tailor HotDog Pro to your own editing style, all toolbars have been designed to be completely customizable. You can create your own toolbars; add/remove functions, HTML tags and macros to any toolbar; hide any toolbar that you don't wish to use or remove it entirely.

  • All toolbars are floating and resizable. By default, each toolbar is displayed just below the menu system, but each toolbar can be moved and re-sized to your individual preference. You can also quickly hide/display your toolbars at any time simply by right-clicking on any currently open toolbar (or selecting Toolbars in the View menu) and selecting the toolbar you wish to hide/display.

HotDog Pro Menus and Toolbars

The table below displays the different sets of functions in the HotDog Pro menu-toolbar system:

  1. File Functions: Menu and Toolbar

  2. Edit Functions: Menu and Toolbar

  3. Insert Functions: Menu and Toolbar

  4. View Functions: Menu and Toolbar

  5. Format Functions: Menu and Toolbar

  6. Table Functions: Menu and Toolbar

  7. Frame Functions: Menu and Toolbar

  8. Form Functions: Menu and Toolbar

  9. SuperToolz: Menu and Resource Panel

  10. Window Functions: Menu

  11. Help Functions: Menu

  12. Custom Colors: Toolbar


Customizing Toolbars

Introduction

Toolbars are one of the quickest ways you can access functionality in HotDog. Because of their importance, HotDog’s toolbars are fully customizable, you can add HTML tags to them (i.e., a single click to insert the IMG tag) as well as defining and adding your own Macros.

The Insert Toolbar.

What Do You Want To Do?

Starting the Toolbar Manager.

Deleting a Toolbar.

Creating a New Toolbar.

Adding and Removing Functions to and from a Toolbar.

Adding HTML Tags to a Toolbar.

Adding Macro’s to a Toolbar.


Starting the Toolbar Manager

Step-by-Step Instructions

  1. On the View Menu select the Toolbars submenu.

  2. On the Toolbars submenu, select "Customize Toolbars".


Deleting a Toolbar

Step-by-Step Instructions

First Start the Toolbar Manager:

  1. On the View Menu select the Toolbars submenu.

  2. On the Toolbars submenu, click Customize Toolbars.

  3. In the Toolbars window click on the Toolbar you want to delete.

  4. Click Delete.


Creating a New Toolbar

Step-by-Step Instructions

  1. On the View Menu select the Toolbars submenu.

  2. On the Toolbars submenu, click Customize Toolbars.

  3. In the Toolbars window, click ‘New’.

  4. Enter a name for the new Toolbar.

  5. Start dragging buttons onto the Toolbar.


Adding and Removing Functions To/From a Toolbar

Step-by-Step Instructions

First Start the Toolbar Manager:

  1. On the View Menu select the Toolbars submenu.

  2. On the Toolbars submenu, click Customize Toolbars.

To Add a Function to a Toolbar:

  1. In the Toolbars window, click on the Toolbar you want to edit.

  2. In the Buttons window select the ‘Functionality’ tab.

  3. Drag any buttons from the functionality list to your Toolbar.

NOTE

Any button can only exist on one Toolbar at any time. For example, Say you have the “New File” button on the ‘Standard’ Toolbar. If you create your own Toolbar and want to add the “New File” button to it, HotDog will ask you if you want to remove the “New File” button from the “Standard” Toolbar and put it on your new Toolbar.

Removing a Button from a Toolbar.

  1. In the Toolbars window, click on the Toolbar you want to edit.

  2. On the Toolbar, right click over the button you want to remove,

  3. Select ‘Remove Button’.


Adding HTML Tags to a Toolbar

Step-by-Step Instructions

Start the Toolbar Manager:

  1. On the View Menu select the Toolbars submenu.

  2. On the Toolbars submenu, click Customize Toolbars.

To Add HTML Tags to a Toolbar

  1. In the Toolbars window, click on the Toolbar you want to add an HTML Tag to.

  2. In the Buttons window select the ‘Tags’ tab.

  3. Drag any HTML tags you want to add on to your Toolbar.


Adding a Macro to a Toolbar

Step-by-Step By Instructions

First start the Toolbar Manager:

  • On the View menu, select the Toolbars submenu.

To Add Macros to a Toolbar:

  1. In the Toolbars window, click on the toolbar you want to add macros to.

  2. In the Buttons window select the Macros tab.

  3. Drag any macros you want to add to your toolbar.


File Functions

Menu and Toolbar

Handling documents is a regular part of website development. The File functions within HotDog Pro ensure that this is done as efficiently as possible and include such features as:

  • creating your own HotDog template style;

  • the easy opening, saving and closing of individual documents, all documents in a website or all documents as specified;

  • saving documents remotely;

  • saving documents as templates, text files, HTML, CSS, ASP, VBScript, JavaScript and PHP documents;

  • opening templates, text files, HTML, CSS, ASP, VBScript, JavaScript and PHP documents;

  • previewing documents;

  • specifying printer settings and printing;

  • updating your version of HotDog Pro by taking you to Sausage's own Autodownload site.


Document Encoding

Introduction

Document encoding refers to the process that HotDog uses when:

  • Translating a saved document's binary information into characters that can be displayed on-screen.

  • Translating characters on-screen into binary information to be stored in a saved document.

Generally you will need to use the Encoding drop-down list within the File Dialog when opening or saving a document that contains non-American English characters.

ANSI Encoding

ANSI stands for American National Standards Institute, the standards organization that developed ASCII (American Standard for Computer Information Interchange). ASCII is basically a set of agreed-upon binary numbers, each number representing an individual text character. For example, a lowercase "d" is represented by the number 100, which in turn translates to 1100100 in binary - this is how the letter "d" is stored in an ASCII encoded file.

The standard ASCII character set defined by ANSI contains 128 characters. An Extended ASCII character set may then be used to add a further 128 characters to the standard 128 ASCII characters. Accented and non-Latin characters are defined in this extended character range.

There are many different versions of the Extended ASCII character set. Therefore an Extended ASCII code may represent a particular character on a Unix Web browser using French language settings, whilst representing a different character on a Spanish Windows 95 system. This means that documents containing characters that are not included in the first 128 characters of the ASCII code-set may look different on a screen from computer to computer. In fact, Extended ASCII-encoded documents may be unreadable if viewed on a computer using a different region-based Extended ASCII character set to the computer that was used to create the document.

It is recommended that documents containing only the following characters be opened and saved in ANSI format:

  • Upper and lowercase English

  • American English punctuation

  • Base 10 numbers

These characters can be read in any Web browser on any system that can read ASCII/ANSI encoded information, no matter what the system's language or regional settings are. The advantage of using ASCII-encoded documents is that they are smaller than Unicode-encoded files.

Unicode

Unicode is a standard for defining a character set, which contains unique binary codes/numbers for every character of every language. Programs and operating systems that can read Unicode can also read standard ASCII characters. Unicode should be used for any document containing accented characters (used in the French and German languages for example) or non-Latin characters (such as those used by Cyrillic, Greek, Hebrew, Arabic, Chinese etc). Pages encoded using Unicode will display properly on any system that supports Unicode, no matter what the language or regional settings for that system are. Most modern browsers and systems support Unicode.

Unicode documents are larger than ASCII documents because more memory is required to record each individual character of a Unicode-encoded document.

UTF-8

UTF-8 is an implementation of the Unicode standard that uses compression to make documents smaller in size. UTF-8 is useful when you wish to use Unicode to display accented or non-Latin characters properly on all systems, but want to minimise the size of your document file. However, some browsers, such as Internet Explorer, may require some customisation of font settings by the user in order for the browser to display UTF-8 encoded documents properly.

UTF-8 No Signature

This is exactly the same as UTF-8, however the defining "signature" code that is usually placed at the start of a document to identify it as a UTF-8 encoded document is not included in the file. Files that use UTF-8 encoding but which do not include the UTF-8 signature have usually been created on a UNIX system, as the UTF-8 signature at the start of a file can cause unusual side-effects when the document is used in a UNIX executable program.

This option will normally only be used to open files that you know have been encoded in UTF-8 without a signature.

Auto

If Auto is selected when opening or saving a file, HotDog will examine the contents of the file to determine what encoding method it should or does use.


Open New Document

Introduction

Each document you open in HotDog is opened and edited using the HotDog editor.

Create a New Document.

  1. On the File Menu click on “New”.

  2. Click “OK”.

Preview a Template.

  1. On the File Menu click on “New”.

  2. Click on the template you want to preview.

The preview of your document appears in the “Preview Window” to the left of the template icons.

Open a Template.

  1. On the File Menu click on “New”.

  2. Click on the template icon you want to edit.

  3. Select “Open as Template”.

  4. Click “OK”.

Change the Default Template Directory.

  1. On the File Menu click on “New”.

  2. Click Template Directory [image] button.

  3. Using the “Directory Picker” navigate to the directory you want to be the Template Directory

  4. Click OK.

Change the Default Template.

  1. On the File Menu click on “New”.

  2. Click the “Current Normal Template” [image] button.

  3. Use the “file picker” to select the new default template.


Templates

Introduction

If you frequently create webpages using a similar style, then it is useful to be able to create a template style that you can use whenever you wish to create a new page. This feature has been made available in HotDog so that you can remove the time that you would waste on repetitive coding.

Another useful feature in HotDog is the ability to insert Publish Fields within your template documents. If you would like instructions on how to do this, read the tutorial about using Publish Fields in Templates.

Saving Your Document as a Template

  1. On the File menu, select Save As.

  2. Using the Save as type drop-down list, select HotDog Template (*.tpl).

  3. Using the Save in drop-down list, select the Template directory, under your HotDog directory.

  4. In the File name field, enter a name for your new template.

Using Your New Template

  1. On the File menu, select New. This brings up the Open a New Document dialog.

  2. In the Available Templates panel, select the template you have created.

  3. Click OK.


Tutorial: Publish Fields in Templates

Publish Fields in Templates

Tutorial: Creating a Template Containing Publishing Fields.

In this tutorial, you are going to create a simple template that inserts a user's name into the document.

Inserting publish fields into your document:

  1. First, open a new document. On the File menu, select New and then click OK.

  2. In your document, between the BODY tags, type: This webpage has been created by

  3. Include a space at the end of the text.

  4. Now you want to insert a publish field. On the Insert menu, select Publish Field. This starts the Add Publish Field Wizard.

  5. Select When A Document Is Created.

  6. Click Next.

  7. The publish field is to be filled in by the user, so select By the User.

  8. Click Next.

  9. In the Message Text window, enter: Please enter your name.

  10. In the Default Value field, enter Anonymous.

  11. Click Finish to insert the field into your document.

  12. Take the time to have a look at the HTML code that has just been inserted into your document. It should look something like:

This webpage has been created by {{CREATE INPUT[[Please enter your name]][[Anonymous]]}}

Saving the template:

  1. Now you can save your new template. On the File menu, select Save As.

  2. Using the Save as type drop-down list, select HotDog Template (*.tpl).

  3. Using the Save in drop-down list, select the Template directory, under your HotDog directory.

  4. In the File name field, enter demo as the name for your new template.

  5. Now close your new template document. On the File menu, select Close.

  6. You can now select this template to use whenever you wish to create a new webpage.

Using the template you have created:

  1. On the File menu, select New. This brings up the Open a New Document dialog.

  2. In the Available Templates panel, select the demo template you have created.

  3. Click OK. A dialog will appear to prompt you with your message text: Please enter your name.

  4. In the field, replace Anonymous with your name.

  5. Click OK.

  6. If you had entered the name Peter Rabbit in Step 18. then the text inserted into your document should now look something like:

This webpage has been created by Peter Rabbit


File Dialogs

Introduction

You will frequently come across file dialogs within HotDog (and indeed most software programs). File dialogs are used to open, save and select files.

To Select A File From Within Another Dialog

  1. Click [image] from within the dialog or wizard that you are using. This will bring up the file dialog.

  2. Use the Look in drop-down list to locate the file you want to select.

  3. Click on the file you want to select

  4. Click OPEN. This will now return you to your original dialog/wizard, with the selected file in the specified field.

To Open Files - The Open File Dialog

  1. Do one of the following:

  • On the File menu, select Open.

  • Click [image] .

  2. Use the Look in drop-down list to locate the file(s) you want to open.

  3. Click on the file(s) that you want to open. Hold the <CTRL> key down before clicking on files for multiple selections. If you wish to open multiple files that are listed consecutively, then you can just hold the <SHIFT> key down and click on the first and last file.

  4. From the Open As drop-down list choose a file type.

    The type of file that you select will determine what syntax highlighting rules are applied to the selected document(s) within HotDog, and may affect the operation of the HTML Property Sheet resource panel. Choose the Default drop-down list setting if you want the settings under [Edit][Preferences][General][File Filters] to apply to the document(s).

  5. From the Encoding drop-down list choose the file encoding method that you want HotDog to use when interpreting and displaying the selected file(s). See the topic Document Encoding for information about the drop-down list options.

  6. Click OPEN.

To Save Files - The Save As File Dialog

  1. Do one of the following:

  • On the File menu, select Save As.

  • Click [image] .

  2. Use the Look in drop-down list to select the location to which you wish to save your file.

  3. In the File Name field, enter the name you wish to give your file.

  4. In the Save as type drop-down list, make sure that you have the right file format selected to ensure that the file is saved with the correct file extension.

  5. From the Encoding drop-down list choose the file encoding method that you want HotDog to use when saving. See the topic Document Encoding for information about the drop-down list options.

  6. Click SAVE.

To Save Files - The Copy File As File Dialog

The Copy File As option under the File menu allows you to save a copy of your current document with a new file name, and then continue working on the new copy of the document, leaving the original version of the file with the original file name open in the background.

  1. On the File menu, select Copy File As.

  2. Use the Look in drop-down list to select the location to which you wish to save your file.

  3. In the File Name field, enter the name you wish to give your file.

  4. In the Save as type drop-down list, make sure that you have the right file format selected to ensure that the file is saved with the correct file extension.

  5. From the Encoding drop-down list choose the file encoding method that you want HotDog to use when saving. See the topic Document Encoding for information about the drop-down list options.

  6. Click SAVE.

  7. The new copy of the file with the new file name you entered in step 3 above will now be open for editing in HotDog. The original file, with the original file name, will remain open in the background.


Import Text

Introduction

There are two ways of inserting text into documents. Text can be inserted as is or converted to HTML.

For example, say you are inserting the following text into a document:

"That is not dead which can eternal lie,

And with strange aeons, even death may die."

-H.P. Lovecraft.

If this text was inserted with no changes, it would appear as above in your webpage with <PRE> tags wrapped around it. However, you would be unable to change the font because the browsers treat all text inside <PRE> tags as plain text.

If you converted the above text to HTML, it would be inserted as:

<P>

"That is not dead which can eternal lie, <BR>

And with strange aeons, even death may die."

</P>

<P>

-H.P. Lovecraft.

</P>

Now that the text is HTML, you can edit the text as you see fit.

Import a Text File.

  1. On the File menu click on “Import Text Document”

  2. Use the File Picker to find the file you want to import.

  3. Click Open.

Insert Text “as is” i.e. with no Changes.

  1. Select “Insert with <PRE> tags”.

  2. Choose where you want to insert the text:

  • Into a New Document.

  • Into the current Document.

  3. Click “Convert”.

Convert Text to HTML.

  1. Choose where you want to insert the text:

  • Into a New Document.

  • Into the current Document.

  2. Select “Convert to HTML”.

  3. Choose which conversion option you want (Usually both).

  4. Click “Convert”.


Preview Document

Introduction

You can preview the pages that you edit in HotDog using any Web browser that is installed on your system.

To Preview a Document in a Web Browser

  1. Select Preview Document from the File menu.

  2. In the list of browsers that appears beside the Preview Document menu option, select the browser that you want to display the document in.

  3. The browser will be activated and will display the document you are editing.

NOTE

  • On some Windows 98 and ME systems, the page currently being edited will be loaded into the browser, however the browser will not be brought to the "front" of the screen. On these systems it will be necessary to click on the flashing browser icon in the task bar to bring the browser to the front of the screen.

Previewing Using F9

  1. Press F9 to preview your document in a Web browser.

  2. You can set the browser that will be used when you press F9 by first selecting a browser from the Preview Document option on the File menu.


Changing HotDog Preferences

Preference Menu

HotDog Pro allows you to specify your preferences in all aspects of using the program:

  1. From the Edit menu, select Preferences.

  2. In the Preferences dialog, use the navigation tree to view and edit different preferences.

In relation to editing you can specify:

  • your preferred ROVER settings

  • the appearance and functionality of the HotDog editing window

  • syntax filters rules

  • syntax validation colors

  • syntax and tag coloring/highlighting

  • recognized file types

  • the locations of the directories HotDog uses

  • the browsers in your browser list

  • the dictionaries used


Preferences - General

Introduction

These settings allow you to control the various features in HotDog. To edit your general settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select General on the tree view of the Preferences dialog.

Only Allow One Instance of HotDog to Run at One Time

Check this option to limit HotDog to only one runable instance of itself at any one time. However, even with this option checked, multiple instances of HotDog can be run if the ‘/m’ command parameter is used. eg HotDog6.exe /m.

Open New Document on Startup

Each time you start HotDog, a new document ready for editing can be automatically created.

Restore Last Session on Startup

Any documents you had open last time you closed HotDog can be automatically re-opened when you start HotDog. The documents will be opened in the same order that they were in when you last shut HotDog down.

Autosave Every XX Minutes

In case your computer crashes, HotDog can automatically save your work at a specified interval. Use this option to tell HotDog how often to save your documents. About 5 minutes is a good number. Remember to set an Auto-Save directory for your files to be saved to.

Undo / Redo Level

HotDog supports almost unlimited Undo/Redo level. However, to save on memory you can force HotDog to remember only a few levels of undo.

Create Backup Files

HotDog can automatically create backup files for you. These files have a ‘bak’ extension. Each time you save a file, your penultimate save is saved as the backup. This is useful for those rare occasions when you accidentally save over a file you wanted to keep.

Refresh External Browser Preview on Save

When you save your document, your external browser can be automatically refreshed. This option is useful when you are working a large file with many saves.

File Dialogs Use Current Directory

Whenever you attempt to save or open a file, the file dialog can display the default directory for your task (as specified by the directories preferences or the directory that you last used.

File Dialogs With a File Preview Window

If you want a quick preview of your files when opening documents check this option.

Dialogs Display Accessibility Options on Loading.

By default HotDog automatically displays accessibility options with each dialog. Accessibility is a very important aspect of good webpage design, however if you wish to turn this option off, just untick this check box.

MultiLine Clipboard Uses Shortcut Keys


Preferences - General - File Filters

Introduction

File filters are used by the local and internet file managers as well as the website manager. They are used as filters to display different types of files. To edit your File Filters settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select General on the tree view of the Preferences dialog and then select File Filters.

Current Filters

The current filter list contains the currently defined filters.

Adding a New Filter

To add a new filter:

  1. In the current filters list, click "Add".

  2. Enter a name for the filter description.

  3. Click "OK".

  4. Add different file types to your new filter (see below).

Adding File Types to a Filter

  1. First create a new filter (see above).

  2. In the "File Types in Current Filter" window, click "Add".

  3. Enter the file type (e.g., *.tiff ).

  4. Click "OK".

  5. Repeat steps 2 - 3 until you have added all the file types you want to add.


Preferences - General - Environment Settings

Introduction

These settings control the "HotDog experience". I wish I could say that using a background image on your HotDog Desktop would make your life complete. I guess it could give you a momentary flicker of happiness - you can't ask for much more than that from an HTML editor.

To edit your General Environment Settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select General on the tree view of the Preferences dialog and then select Environment Settings.

HotDog Sound Effects

Check this option to make HotDog play its various sound effects.

Animated Waiting Cursor

Check this option to use an animated waiting cursor. (It looks cool).

Use Background Color

Click on the color board to select the color that will form the background color of the HotDog desktop.

Use Background Image

Check this option and select a picture to use as the HotDog desktop background.


Preferences - Editing Window

Introduction

These preferences control the appearance and functionality of the HotDog editing window. To edit your general editing window preferences:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog.

Drag 'n' Drop Text Editing

To move and copy text by dragging the selection with the mouse, select the Drag-And-Drop Text Editing check box.

Insert <P> Container

With this option checked, when you insert a <P> tag, HotDog will automatically insert a </P> for you. (The </P> tag ending is optional in HTML).

Show Hidden Fields

Checking this option will make all the hidden characters, such as tabs, spaces, carriage returns etc. appear in your document.

Dim Hidden Fields

This option forces HotDog to display control characters (such as carriage returns etc. ) dimly.

Word Wrap

To wrap the text from one line to the next within the document window, select the Word Wrapping check box.

Tab Size

This sets the distance (in number of characters) between the Tab Stops in your editing window.

Print Margin

You can define the position of the print margin here.

Show Print Margin

This option displays the print margin. The print margin shows the width of the printed page. If you work within the print margin, when printing, your text will appear exactly as you see it on your screen.

Auto Indent

Positions the cursor under the first nonblank character of the preceding nonblank line when you press Enter.

Tabs as Spaces

With this option ticked, your tabs are recognized as spaces in the editing window.

Show Gutter

With this option checked the Gutter is displayed, allowing for insertion of bookmarks and line numbers.

Show Line Number

With this option checked the line number is displayed making it easier for you to edit long sections of code.


Preferences - Editing Window - Appearance

Introduction

These preferences control the appearance and functionality of the HotDog editing window. To edit the appearance of your editing window:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select Appearance.

Font Name

This is the basic font that the HotDog editor uses to display plain text.

Font Size

Sets the basic font size that the HotDog editor uses to display plain text.

Background Color

Sets the background color of the HotDog editor.

Text Color

Sets the color of plain text.

Selection Background Color

Sets the background color of selected text.

Selection Text Color

Sets the color of selected text.

Inactive Selection Background Color

Sets the background color of inactive selected text. (I'll bet you're glad we included this option).

Inactive Selection Text Color

Sets the color of inactive selected text.

Preview

Shows a preview of your color settings.

Adding New Colors

To add a new color to the to a color list:

  1. Right click on the drop down list to which you want to add a color.

  2. Select "Add Color".

  3. Select the color you want to add.

  4. Click "OK".

Removing a Color

To remove a color from a color list:

  1. Right click on the drop down list to which you want to remove a color.

  2. Select "Remove Color".


Syntax Filters

Preferences - Editing Window - Syntax Filters

Introduction

HotDog uses several syntax files to validate any code you create. These syntax files are separated by versions and browser support. For example, if you want to use only tags that are HTML version 3.2 compliant, you can specify that only allow HTML 3.2 tags are considered valid. This means that any tags or attributes that don't form part of this specification will be underlined.

This is particularly useful if you want to design your pages so that they are compatible with different browsers. (The HTML Property Sheet also displays the properties of each tag, making it very simple for you to ensure browser compatibility whilst editing - you just need to place your cursor within the tag in your editor window that you're interested in. By avoiding browser specific tags you can be fairly sure that your page will show up on many different browsers.)

Define Syntax Specifications to use on your Document.

Your Syntax Filter preferences let you control the syntax that is recognized by HotDog. To edit these:

  1. In the Edit menu, choose Preferences and then navigate to Syntax Filters.

  2. Using the Language drop-down list, select the language for which you wish to define the filter rule.

  3. Using the Filter Rule drop-down list select the syntax specification you wish to use.

  4. Click OK.


Preferences - Editing Window - Syntax Validation

Introduction

As you type, if you make any syntax errors, HotDog will notify you immediately. HotDog usually recognizes what the error is and will tell you what part of your tag is incorrect. HotDog will also describe the full HTML specification of the tag. See the HTML Property Sheet for more details on how to work with HTML. You can also specify which syntax files will be recognized in your work. For example, to be on the safe side, you might only wish to use the HTML 3.2 syntax file. This means that any tags or attributes you type that don’t form part of this specification will be underlined.

Your Syntax Validation preferences let you control the colors used in the syntax validation process. To edit these:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select Syntax Validation.

Valid Elements

Determines the color for a valid element.

Invalid Elements

Determines the color for an invalid element.

Preview

Shows a preview of the colors you have chosen.

Turning on Syntax Highlighting

At the bottom of the document, click the Syntax Highlighting button:


Preferences - Editing Window - HTML Syntax Coloring

Introduction

These settings let you control the colors used in the HTML syntax validation process. To edit the colors of your HTML syntax:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select HTML Syntax Coloring.

Note: These controls allow you to set the preferences for all syntax within your HTML files, including any inline/embedded Javascript, CSS and VBScript. If you wish to specify the syntax colors within your Javascript, CSS, VBScript or ASP files, then you will need to use the other Editing Window preference controls.

Syntax Classes

This box lists all different classes that HotDog recognizes.

Text Color

Shows the text color of the currently selected syntax class. Use this list to change the color of the text for the selected syntax class.

Background Color

Shows the background color of the currently selected syntax class.

Preview

Shows a preview of what the selected colors will look like in HotDog.


Preferences - Editing Window - CSS Syntax Coloring

Introduction

These settings let you control the colors used in the CSS syntax validation process. To edit the colors of your CSS syntax:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select CSS Syntax Coloring.

Note: These controls allow you to set the preferences for all syntax within your CSS files. If you wish to specify the syntax colors within your HTML, Javascript, VBScript or ASP files (including any inline/embedded CSS), then you will need to use the other Editing Window preference controls.

Syntax Classes

This box lists all different classes that HotDog recognizes.

Text Color

Shows the text color of the currently selected syntax class. Use this list to change the color of the text for the selected syntax class.

Background Color

Shows the background color of the currently selected syntax class.

Preview

Shows a preview of what the selected colors will look like in HotDog.


Preferences - Editing Window - JavaScript Coloring

Introduction

These settings let you control the colors used in the JavaScript syntax validation process. To edit the colors of your JavaScript syntax:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select JavaScript Coloring.

Note: These controls allow you to set the preferences for all syntax within your JavaScript files. If you wish to specify the syntax colors within your HTML, CSS, VBScript or ASP files (including any inline/embedded Javascript), then you will need to use the other Editing Window preference controls.

Syntax Classes

This box lists all different classes that HotDog recognizes.

Text Color

Shows the text color of the currently selected syntax class. Use this list to change the color of the text for the selected syntax class.

Background Color

Shows the background color of the currently selected syntax class.

Preview

Shows a preview of what the selected colors will look like in HotDog.


Preferences - Editing Window - VBScript Coloring

Introduction

These settings let you control the colors used in the VBScript syntax validation process. To edit the colors of your VBScript syntax:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select VBScript Coloring.

Note: These controls allow you to set the preferences for all syntax within your VBScript files. If you wish to specify the syntax colors within your HTML, JavaScript, CSS, or ASP files (including any inline/embedded VBScript), then you will need to use the other Editing Window preference controls.

Syntax Classes

This box lists all different classes that HotDog recognizes.

Text Color

Shows the text color of the currently selected syntax class. Use this list to change the color of the text for the selected syntax class.

Background Color

Shows the background color of the currently selected syntax class.

Preview

Shows a preview of what the selected colors will look like in HotDog.


Preferences - Editing Window - ASP Coloring

Introduction

These settings let you control the colors used in the ASP syntax validation process. To edit your ASP syntax:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select ASP Coloring.

Note: These controls allow you to set the preferences for all syntax within your ASP files, including any inline/embedded HTML, Javascript, CSS and VBScript. If you wish to specify the syntax colors within your HTML, Javascript, CSS, or VBScript files (including any inline/embedded ASP), then you will need to use the other Editing Window preference controls.

Syntax Classes

This box lists all different classes that HotDog recognizes.

Text Color

Shows the text color of the currently selected syntax class. Use this list to change the color of the text for the selected syntax class.

Background Color

Shows the background color of the currently selected syntax class.

Preview

Shows a preview of what the selected colors will look like in HotDog.


Coloring Tags

Mini-tutorial

Changing the color of different tags is very useful because it helps you pick out the information you need to find from a jumble of HTML. It is particularly useful when you are trying to study other people’s HTML. For instance, you may want to see how an image has been aligned. The link around the image would simply be a distraction.

To Set the Color of Your Tags:

  1. In the Edit menu, select Preferences.

  2. In the Preferences dialog, open the Editing Window directory and select Tag Coloring.

  3. In the Tag Coloring window, click [image] to create a new tag category.

  4. Enter into the field the name you wish to call the tag category and click OK.

  5. In the Unassigned Tags list, select a tag you wish to be included in this category.

  6. Click [image] to add the tag to the Current Tags list.

  7. Repeat step 6. and 7. for any other tags you wish to add to the current tag category.

  8. Click [image] if you wish to remove any tags from the Current Tags list and place them back into the Unassigned Tags list.

  9. Use the Text Color drop-down list to select the text color of the tags in the current category.

  10. Use the Background Color drop-down list to select the background color of the tags in the current category.

I would recommend that the following tags should have their own color: tables, images and hypertext links. Generally, these three tag types make up important content in a webpage. Having them clearly colored will aid the efficiency of your editing.

Example - Making All the Tags Associated with Tables Red:

  1. In the Edit menu, select Preferences.

  2. In the Preferences dialog, open the Editing Window directory and select Tag Coloring.

  3. In the Tag Coloring window, click [image] to create a table tags category.

  4. Enter Table Tags into the field and clik OK.

  5. Scroll through the Unassigned Tags list and select the table tag .

  6. Click [image] to add the table tag to the Current Tags list.

  7. Repeat step 6. and 7. for both the td and tr tags.

  8. Use the Text Color drop-down list and select red (255,0,0).

Now when you insert a table into your document, the tags appear as red text, clearly defining your table.

To Remove a Tag Category:

  1. In the Edit menu, select Preferences.

  2. In the Preferences dialog, open the Editing Window directory and select Tag Coloring.

  3. In the Tag Categories list, select the category you wish to remove and click [image] .


Preferences - Editing Window - HTML Specific

Introduction

This page lets you to change the settings related to the editing window. To edit your HTML specific preferences:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select HTML specific.

Syntax Highlighting

If you want all your HTML tags will to appear highlighted, so as to appear separate from the text in your document, select this option.

Tag Coloring

Makes all your tags appear in a different color.

Error Tooltips

Checking this option will make balloon help available when you mouse over any incorrect HTML tag.

HTML Tooltips

HotDog can provide you with interactive HTML tooltips. Just move your over any HTML tag, and HotDog will give you a brief description of its functionality.

Images as Tooltips

When you hold the mouse over an image tag, HotDog can display the referenced image in a tooltip screen. This is useful way of reminding yourself what the image looks like.

Colors as Tooltips

When you hold the mouse over the HTML code for a color, HotDog will display the true color as a tooltip. For example, if the mouse is held over #888888, the tooltip will show a grey box.

Use Emphasis Tag Instead of Italic Tag

Use the <EM> tag to display slanted text instead of the <I> tag.

Use Strong Tag Instead of Bold Tag

Use the <STRONG> tag to display heavy text instead of the <B> tag.


Preferences - Editing Window - File Types

Introduction

These settings let you control the type of files that can be edited and saved in HotDog. To edit your File Types settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select File Types.

Default Document Extension

This field specifies the file extension that you wish to use for your HTML documents. The most common is .HTML but some users prefer using .HTM. The file extension that you enter into this field will determine what file extension is applied to HTML files when you save them under a new file name.

NOTE

You will need to go to [Edit][Preferences][General] and check the option File Dialogs with a File Preview Window in order for the default document extension to be applied to saved files.

Default Backup Extension

This field defines the file extension of you wish to use for your backup files.

Adding New Extensions...

Clicking the Add button adds a file extension to the list of currently defined file extensions.

The File Type to Open As drop-down list defines how a file extension is to be opened. For example, a TIFF file should be opened as an image.


Preferences - Editing Window - Code Completion

Introduction

These settings let you control how code completion is activated. To edit your code completion settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select Editing Window on the tree view of the Preferences dialog and then select Code Completion.

Enable Code Completion

Ticking this check box turns on code completion.

Type of Code Completion

Passive

If selecting this option, the code completion will only be activated when <CTRL> + <SPACE> is pressed.

Tag Active

If selecting this option, code completion will be activated whenever the opening brace ('<') of a tag is entered.

Active

If selecting this option, code completion will be automatically opened after a set delay whenever the cursor is inside a tag.

Style

You can use the two drop-down lists to specify the way the code completion appears when you edit.

Active Delay Time

This bar selects the time delay before code completion is activated within the code completion.

Automatically Close Tags

Selecting this option automatically closes tags when the first opening brace ('<') is entered.


Preferences - Rover

Introduction

These preferences control the ROVER. To edit your ROVER Settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select ROVER on the tree view of the Preferences dialog.

ROVER is Enabled

Check this option to enable HotDog’s ROVER. Use the drop down list to select the browser you want to use to preview your work.

ROVER Activated on Startup

Loads ROVER when HotDog is first started.

Display Ruler by Default

Displays ROVER’s ruler by default.

Refresh ROVER After Inserting Tags

Each time you insert a tag into your document, ROVER can automatically refresh your work.

Refresh ROVER when Saving Document

ROVER can be automatically refreshed (that is updated) whenever you save a document.

Refresh ROVER After XX Seconds

ROVER is HotDog’s built in browser. ROVER can update any changes you have made to your document at various rates defined by this option.

Disable Automatic ROVER Refresh for Documents Over XX

For larger documents, the refresh rate of ROVER might be too slow. You stop ROVER from automatically refreshing for large documents with this option.

TIP

  • You can also refresh the ROVER display of your document at any time by either right-clicking in the ROVER window and selecting Refresh from the context menu that appears, or you can simply use the <CTRL>+F9 shortcut key combination.


Preferences - Directories

Introduction

Use the directory preferences to set the locations of various directories HotDog uses. To edit your Directory Settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select Directories on the tree view of the Preferences dialog.

Documents

Whenever you save an HTML file, HotDog will present you with a default directory for storing your files. Using this option you can control which directory will be used to store your documents.

Templates

Whenever you save a template file, HotDog will present you with a default directory for storing it. Using this option you can control which directory will be used to store your templates.

Images

Whenever you save an image file, HotDog will present you with a default directory for storing it. Using this option, you can control which directory will be used to store your graphics.

Published Files

Should you choose to publish your files to a directory, they will be published to the directory specified here.

Backup Directory

The backup directory stores all your backed up files.


Preferences - Browsers

Introduction

This section lets you specify which browsers will be in your browser list. To edit your browser settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select Browsers on the tree view of the Preferences dialog.

A window will be displayed showing each of the external browsers HotDog has been able to locate.

Search For Browsers

For HotDog to be able to preview your documents using an external browser, you have to specify where your external browsers are located. Just click [image] in the and HotDog will attempt to automatically detect all your browsers. Usually this procedure will work first time. If not, you may have to enter the position of the browsers manually using the method described below.

Editing The Browser List

To Add a Browser:

If HotDog can't automatically find your browser - you will have to specify its location manually. To do this:

  1. Click Add.

  2. Enter the description to be linked to the browser. For instance, if you were entering the path to Netscape 2.02 you might describe it as NS ver 2.02.

  3. Enter the path to the browser. Alternatively, click [image] to browse for the location of the browser.

  4. Click OK.

To Edit a Browser:

  1. Click Edit.

  2. Make any changes you need (such as updating the location of a browser on your hard drive), then click OK.

To Remove a Browser:

  1. Select the browser in the browser list that you wish to remove.

  2. Click Remove.

TIP

  • You can specify which browser will be used to preview your document when you press the F9 shortcut key by first selecting the browser from the Preview Document option under the File menu. Subsequent presses of F9 will display the document you are editing in the browser you selected.


Preferences - Dictionaries

Introduction

Controls the type of dictionary used in HotDog. To edit your Dictionary Settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select Dictionaries on the tree view of the Preferences dialog.

Selecting a Dictionary

You can select one or more dictionaries, based on different languages, for use in the HotDog spell-checker.

  1. Click on the check box to the left of the desired language in the Dictionaries preferences screen. A tick will appear in the check box, meaning that this dictionary has been selected for use by the HotDog spell-checker.

  2. You can also de-select dictionaries by clicking on the appropriate check-box so that the selected dictionary's tick disappears.

  3. When the desired dictionaries have been selected, click on the OK button to dismiss the preferences screen and save your preferences.

  4. Restart HotDog for the spelling preferences to take effect.

Installing New Dictionaries

You can add to the list of dictionaries in the Dictionaries preferences screen by following the steps below.

  1. Go to the HotDog Professional 6 download page at: http://www.sausagetools.com/professional/download.html

  2. At the bottom of this page you will find links for several dictionaries supporting different languages.

  3. Click on the link for the dictionary that you wish to download.

  4. After the dictionary installation file has downloaded, double click on the file to run it.

  5. After the installation process has completed, you will be able to select the new dictionary from the Dictionaries preference screen in HotDog.

Note: It may be necessary to restart HotDog 6 before the new dictionary will appear in the Dictionaries preference screen.


Preferences - Publishing

Introduction

The options below are only activated when you publish your document - either on uploading to the Internet, or using Format | Publish Document. To edit your Publish Settings:

  1. On the Edit menu, select Preferences.

  2. Select Publish on the tree view of the Preferences dialog (you may need to scroll down the tree view).

Publish To Directory

Instead of publishing your website to the Internet your can choose to publish it to a directory. This option is used for people wishing to publish to an Intranet. If you choose this option then you should also specify your Publishing Directory.

Replace '\' with '/' in Filenames

Generally this option should be left checked. It replaces DOS style paths with UNIX style paths.

Convert Extended Characters to HTML Codes

If you have used any extended characters in your web document, HotDog can automatically translate them into HTML on publishing.

Remove All Carriage Returns

HTML text without carriage returns appears as one long line. It looks terrible. Should you want your webpage source devoid of carriage returns, this is the option for you.

Tag Case

These options let you select in which case your tags will appear.

Ignore

Your tags are left as you typed them.

Uppercase

Your tags are all converted to uppercase.

Lowercase

Your tags are all converted to lowercase. (Much more readable for humans.)

File Format

You can save your document as a Windows (recommended), UNIX or Amiga file format.


Preferences - Publishing - AutoReplace

Introduction

Use the Replace function if you wish to replace certain words or expressions on publishing (such as build notes etc.). To edit your AutoReplace Publish Settings:

  1. On the Edit menu, select Preferences submenu.

  2. Select Publish on the tree view of the Preferences dialog and then select AutoReplace (you may need to scroll down the tree view).

To Add a Replace Term

  1. Enter the expression you want to replace in the ‘Replace’ window.

  2. Enter the expression you want to be replaced with in the ‘With’ window.

  3. Click "Replace".

To Remove a Replace Term

  1. On the ‘With’ window, click on the replace expression you want to remove.

  2. Click "Delete".


Preferences - Server

Introduction

These preferences allow you to specify a local server for previewing. To edit your server preferences:

  1. On the Edit menu, select Preferences submenu.

  2. Select Servers on the tree view of the Preferences dialog (you may need to scroll down the tree view).

Instructions

To Specify a Directory to Preview Using a Local Server:

  1. In the Local Directory field, enter the directory containing the contents that you wish to be previewed using a local server.

  2. In the Server Path field, enter the address of the local server that you wish to use to preview the contents in the directory you have specified in step 1.

  3. Click Add to add this server preference to the list.

  4. Make sure that the Use these settings when previewing check box is ticked, when you wish to preview using these settings.

  5. Repeat steps 1. to 4. for any other directories that you wish to preview using a specific local server.

To Edit a Directory to Preview Using a Local Server:

  1. In the Local Directories column, select the entry you wish to change.

  2. In the Local Directory and Server Path fields, make the changes you wish.

  3. Click Replace.

To Remove an Entry:

  1. In the Local Directories column, select the entry you wish to change.

  2. Click Remove.


Insert Functions

Menu and Toolbar

During webpage development, authors frequently need to insert a variety of objects into their documents. The Insert functions within HotDog Pro bring up dialogs that help you to quickly and correctly insert objects into your webpages. From the Insert menu/toolbar you can call up the following dialogs and wizards:

  • Insert Image: This dialog allows you to specify the image you wish to insert, specify advanced image properties (including Accessibility information), or run the Image Wizard (for beginner's who want you step-by-step guide to inserting images properly).

  • Insert Hyperlink: This dialog makes it easy for you to create anchors/links within your document, specify targets and frame targets as well as including Accessibility information.

  • Insert Target ID: This dialog allows you to specify anchors or jump points within your document, so that you can link to different parts of your document from any hyperlink.

  • Insert Horizontal Rule: This dialog allows you to specify the properties of a horizontal rule that you wish to insert into your document.

  • Insert List and Insert Definition List: These dialogs allow you to specify the properties of lists that you wish to insert into your document.

  • Embed Item: Using this dialog, you can specify the object that you wish to embed and specify the object dimensions.

  • Insert Image Thumbnail Table: This wizard guides you step-by-step through the involved process of creating and inserting an image thumbnail table. Using this wizard allows you to quickly browse directories for images, animations and sounds.

  • Add Publish Field: This useful little wizard shows you how to add publish fields to your webpages or templates.

The Insert functions also allow you to easily insert Comment tags, add special fields (such as the date/time) and insert a HotDog link into your webpages.


URLs - What Are They And How To Use Them

Introduction.

A URL (Uniform Resource Location) is an address for something you can access on the Internet. Usually the address will be a webpage. For example, http://www.sausagetools.com/index.html is a URL. Most browsers have the http:// as a given, so you could just enter www.sausagetools.com/index.html. However, URLs don’t have to point to webpages. For instance, the URL:

http://www.sausagetools.com/graphics/logos/sausage_silver_white_type_300x140.jpg

points to an image.

Special Rules

There is a special webpage name you can use called index.HTML (or index.htm). This webpage name is the default webpage that browser will display if no webpage is specified in the URL. For instance, if you enter www.sausagetools.com into your browser, you will see Sausage Software’s home page. What you are actually seeing is http://www.sausagetools.com/index.htm. Now you are designing your own webpages, you can take advantage of this fact. The index.HTML page is your welcome page. It should be used as a jumping off point for all your other webpages.

Example

When HotDog asks you for a URL, it is asking for the address of some resource on the Internet. This could be a webpage, image or sound. All you have to do is know what the address is and you can link to it.

For example, say you wanted to link to a band, They Might Be Giants. First of all you need to find the address for their website. In the course of your searching you come across a webpage and decide that this is the page you want to link to. Now you must find the URL or address of the webpage. Usually, somewhere near the top of your browser, there is a box displaying the address of the page you are viewing:

Typical Browser showing URL The URL is http://www.tmbg.com/. Note, the last slash is not necessary but is technically correct. You will notice if you follow any of the links in the site, the address will change. For instance, if you follow the melody link (animation of a turning record), the URL becomes http://www.tmbg.com/melody/index.html. An exact break down of the URL is possible. The webpage pointed to by the melody link is called index.HTML and is stored in the melody directory on their server. Because the filename is index.HTML, you could just enter the address http://www.tmbg.com/melody/ and you would see the same webpage.

Inserting a Link to Another webpage.

Now you know the URL of the webpage, inserting a link to the URL from your own webpage is easy.

  1. On the Insert menu, select Insert Hyperlink. This will bring up the Insert Hyperlink dialog.

  2. In the URL field, enter the URL of the They Might Be Giants Website: http://www.tmbg.com

  3. In the description field, enter the words that the viewer should click on to link to the They Might Be Giants website. For example, you could enter the word here into the description field. The result would look something like this on the visitor’s browser:

Click here to visit this great website.

TIPS

Sometimes you will follow a link to a webpage but will be unable to find the introduction to the whole website (the homepage). Often you can find this page by directly entering obvious URLs yourself.

Example:

You are at the webpage: http://www.dummyname.com/download/downloadpage.HTML

If you wanted to try and find the welcome page to this site (i.e., the index.HTML page), try entering the following URLs into your browser:

  • http://www.dummyname.com

  • http://www.dummyname.com/download

In all likelihood, one of the above URLs would have the information you need.

URLs in HTML

Now you know what a URL is, how do you insert one in HTML?

The basic HTML syntax for a URL is:

<A HREF="http://www.sausagetools.com/">Text to cl ick on</A>

The <A> tag (Anchor) sets up the beginning of the URL. The HREF (Hypertext Reference) attribute inside the <A> tag defines the address of the URL. Note how the text to click on is managed. It is inserted between <A HREF="....."> and </A>. That is, it is between the opening and closing Anchor tags. Any text you insert between <A>and </A> can be clicked on to link to the specified URL. In fact, if you look at the code that changes images into links, you will see it is just an extension of this principle. For example, if you have an image called sausage_logo in your graphics directory, then the code could look something like:

<A HREF="http://www.sausagetools.com/">

<IMG SRC="graphics/sausage_logo.jpg">

</A>

Put simply, the image has been placed between <A>and </A> (that is, it has been wrapped by the URL), and can now be clicked on to link to the Sausage Software website.


Insert Link

Introduction

Creating links in webpages is the feature that makes the Internet what it is. The World Wide Web could do without images but not links. As such, inserting links into your webpage should be as easy as possible.

To Insert a Plain Internet link (URL)

  1. On the Insert Menu, click ‘HyperLink’.

  2. In the Insert Link dialog, enter the URL and the description of the link.

You can also use the Insert Link Wizard. This wizard not only simplifies the process of inserting links into a document for a beginner, it also aids in the insertion of other types of links, such as Email links, FTP links, Gopher Links and more.

TIP

You can quickly insert a link to another file in your Website by double-clicking on the file in the Local Files resource panel (or in the Websites resource panel).

What Do You Want To Do?

Learn more about Inserting URL’s into HotDog.

Start the Insert Link Wizard.


Insert Link (Extended)

Introduction

URL’s can be referenced in two ways; via absolute Internet links (http://www.sausagetools.com) or by relative links (art/elise.HTML). Relative links are used for linking to other documents that form part of your Website. Absolute links are used to link to documents that are elsewhere on the Internet (a link to Sausage Software for example). If you are new to HTML, use the Insert Link Wizard for a step-by-step guide on how to create links in your document.

Inserting a Link into your Document.

  1. On the Insert menu, click ‘HyperLink’.

  2. Do one of the following:

  • To enter an absolute Internet link type a URL into the URL box in the Insert Link dialog box.

  • To enter a relative link click [image] and using the file picker select the file you want the link to point to.

  • To link to a Target (Internal Anchor), select the Target name from the Named Target List.

  • To open the link in a frame window, enter the name of the Frame Target in the Frame Target box.

What Do You Want To Do?

Learn about Absolute and Relative Links.

Learn about Frame Targets.

Learn about Internal Links.

NOTE

  • To insert relative links into a HotDog document, your document must be saved.

  • If you are using frames you can also specify in which frame you want the URL to open, using the Frame Target box.

  • If you want to create other links (to Gopher or an e-mail link for example), use the Link Wizard. Click the [image] button in the ‘Insert Link’ dialog.


Start the Insert Link Wizard

Introduction

This wizard guides you through the process of inserting links within your document. A URL is a type of link, but should not be mistaken as the only kind of link. As you can see from the list below there are several types. Apart from URL’s the most commonly used link type is the E-mail link. This type of link, when clicked, starts up the visitor’s e-mail program, with a pre-addressed message!

To Start the Insert Link Wizard.

  1. On the Insert menu, click on “Hyperlink”

  2. In the “Insert Link” dialog, click the [image] button.

Inserting a Link to Another Webpage.

  1. Choose a link type of “Website Link”.

  2. Enter the URL details.

For Example:

Server Name: www.sausagetools.com

Server Directory: images

File Name: picture.jpg

Inserting an E-mail Link.

  1. Choose a link type of “Email Link”.

  2. Enter the Email Address that you want the link to send to.

Inserting a Link to a File.

  1. Choose a link type of “File Link”.

  2. Press the [image] button to open the File Picker.

  3. Select the file you want to link to.

Inserting a Link to a FTP site.

  1. Choose a link type of “FTP Link”.

  2. Enter the address of the FTP Site you want to link to when a visitor clicks the link.

Inserting a Link to a Newsgroup.

  1. Choose a link type of “Newsgroup Link”.

  2. Enter the Newsgroup Address that you want opened when a visitor clicks the link.

Inserting a Telnet Link.

  1. Choose a link type of “Telnet Link”.

  2. Enter the Telnet Address that you want opened when a visitor clicks the link.

Inserting a Gopher Link.

  1. Choose a link type of “Gopher Link”.

  2. Enter the Gopher address and arguments you opened and passed when a visitor clicks the link.


Frame Targets

Introduction

When using frames you will want more control over the visitor's browser. For example, when a visitor clicks a link, you will want to be able to define which frame loads the new page. Fortunately, it is simple to designate which window will load what URL using the TARGET attribute.

For Example

Say you have defined a webpage with two frames:

<frame src="frametoolbar.HTML" name="toolbar">

<frame src="FrameWelcome1.HTML" name="mainpage">

The frames above are called ‘toolbar’ and ‘mainpage’.

To open a URL in either window use the TARGET attribute:

<A HREF="http://www.sausagetools.com" TARGET="mainpage"> Click here to go to Sausage Software </A>

If the user clicks on this link, Sausage Software’s home page is opened up in the frame called ‘mainpage’.

In addition to using the named frames as targets, you can also use four pre-defined targets:

_blank | Targets a new unnamed window.
_self | Loads into the window the link is in.
_parent | Loads into frameset parent, defaults to _self if no parent.
_top | Loads into the full window, defaults to _self if at top.

Use the Insert Link dialog to easily create links with associated targets.


Internal Links

Introduction

An Internal Anchor is a way of inserting clickable links within your document to another part of the same document. For example, if you have a large HTML document with multiple chapters in it, you can create a table of contents at the top of your document, where each line of the contents at the top is linked to the corresponding chapter further down in the same document.

Inserting anchors into your document can be broken down into two steps.

  1. Adding targets (or anchor) to your document.

  2. Jumping to those targets.

An Internal Target is a named location within your webpage that will be pointed to by the link. The link is what jumps to a target. For example, to create a table on contents with two entries, linking to two different parts of the same document you would do the following:

Create a new document which looks like the following:

<HTML>

<HEAD>

<TITLE> Internal Anchor Example </TITLE>

<META NAME="generator" CONTENT="Sausage Software HotDog Professional 5">

</HEAD>

<BODY>

<P> Table of Contents </P>

<P> Chapter 1 </P>

<P> Chapter 2 </P>

<P>

<P> .. <!-- Enter about 20 P’s here -- >

<P> This is Chapter 1 </P>

<P>

<P> .. <!-- Enter about 20 P’s here -- >

<P> This is Chapter 2. </P>

</BODY>

</HTML>

Now you have to name the links that will form the chapter headings. These specially named links are called targets.

  1. Under the Table of Contents, place the cursor just before ‘This is Chapter 1 <BR>’

  2. On the Insert Menu, click ‘Target ID’.

  3. A window appears asking you the target name. Enter ‘ch1’.

Follow the same process for the Chapter 2 link. You have just specified two different parts of your document by using targets. Now you are going to link to these targets from the contents at the top of your document.

Go back to the top of the document.

  1. Highlight ‘Chapter 1’.

  2. On the Insert menu, click on HyperLink.

  3. In the ‘Insert Link’ window, click on the ‘Jump to named target’ list box.

  4. Select ‘ch1’.

Follow the same process for creating a link to chapter 2.

Your HTML code should now look like the following:

<HTML>

<HEAD>

<TITLE> Internal Anchor Example </TITLE>

<META NAME="generator" CONTENT="Sausage Software HotDog Professional 4">

</HEAD>

<BODY>

<P> Table of Contents </P>

<P> <A HREF="#ch1">Chapter 1 </A> </P>

<P> <A HREF="#ch2">Chapter 2 </A> </P>

<P>

<P> .. <!-- Enter about 20 P’s here -- >

<P> <A NAME="ch1"></A> This is Chapter 1 </P>

<P>

<P> .. <!-- Enter about 20 P’s here -- >

<P> <A NAME="ch2"></A> This is Chapter 2. </P>

</BODY>

</HTML>


Anchor Name

Anchor Name / Target ID

Introduction

An Anchor Name or Target ID specifies a unique name for a location within your webpage. This name is used for creating internal jumps or links to this position within your document. For information on how to use these, read the tutorial on how to create internal links.


Insert Rule (Line)

Introduction

Use this dialog to insert a horizontal line (or rule) into your webpage.

Open the Insert Horizontal Rule Dialog.

  1. First open the Insert Horizontal Rule Dialog:

  2. On the ‘Format’ menu click “Line”.

Insert a Line into your Document.

  1. In the Thickness box, choose the thickness of the line.

  2. Using the Alignment menu, choose the alignment of the line on your webpage.

  3. The Width box can be used to set the width of the line.

TIP

The width of a line can be defined in two ways, as a percentage of screen width, or absolutely in pixels. The difference lies in how the line is displayed when a visitor resizes their browser. If you define a lines width as a percentage of the screen width (100%) say, then no matter how a visitor resizes their browser, the line will always fit exactly across their screen. If a line’s width is defined in pixels, then the line will always appear the same width, no matter how a visitor resizes their browser. If the browser window is smaller than the line, then scrollbars appear in the window.


Bulleted and Numbered Lists

Introduction

The Insert List Dialog gives you an easy way to create bulleted and numbered lists. Lists are used to display information or steps in a clear and concise manner. Two examples are shown below:

  • Blue

  • Black

  • Red

  • Green

  1. First step.

  2. Second step.

  3. Third step.

  4. Fourth step.

Start the Create List Dialog.

  • On the Insert menu, select List.

  • This Heading field can be used to give your list a title.

Adding Terms To a List.

  • Type each item in your list into the Text Box, pressing ENTER or RETURN after each item.

Create a Numbered List.

An ordered list should contain information where order needs to be emphasized. (In your HTML code this is created using the OL element.) If you wish the information in your list to be ordered then:

  1. In the List Type panel, select Numbered.

  2. In the Numbering Style panel, select the numbering style you wish to use.

Create a Bulleted List.

An unordered list, created using the UL element, should contain information where order is unimportant. (In your HTML code this is created using the OL element.) If you wish the information in your list to be unordered then:

  1. In the List Type panel, select Bulleted.

  2. In the Bullet Style panel, select the bullet style you wish to use.

Note: Selecting None in Step 1. will create an unordered list with an ordinary bullet style.


Definition Lists

Introduction

Definition lists are used when you want to define a term.

Create a Definition List

  1. On the Insert menu, select Definition List.

  2. To add a heading to a list, enter the heading into the Heading box.

  3. Edit your list:

To Add a Term to a List:

  1. Click Add Term. An empty field will appear in the Definition Term window.

  2. In this field type the term you wish to add.

To Add a Definition for a Term:

  1. In the Definition Term window, click on the term for which you want to add a definition.

  2. In the Definitions window, type a definition for the term.

To Edit a Definition for a Term:

  1. In the Definition Term window, click on the term for which you want to edit a definition.

  2. In the Definitions window, click on the definition you want to edit and make the changes you wish.

To Remove a Term from your List:

  1. In the Definition Term window, click on the term you want to remove

  2. Click on the Remove Term button.

  4. Once you have finished editing your definition list, click OK to insert the list into your document.

To Edit a Definition List After Inserting it into Your Document

To edit your list after inserting it into your document:

  1. In the editing window, select the entire code that was inserted for the definition list.

  2. On the Insert menu, select Definition List.

  3. Repeats steps 2. to 4. in the Create a Definition List instructions above.

Note: These steps will only work if the code you select in step 1. is correct.


Embedding Items

Introduction

Sometimes, rather than linking to a document, an author may want to embed it directly into a primary HTML document. Embedding allows documents of different types to be inserted into your web page. Embedded items are used to allow viewers to either download or access files from your web page.

The Embed Item dialog is used to provide links to non-standard files. For example, some browsers can display word files. The embed tag could then be used to provide a link to a word file, the size parameters would be used to define the size of the window in the browser that displays the word document. In particular Netscape makes use of the embed tag to embed audio and video controls within a web page.

Embedding an Item into Your Webpage

  1. On the Insert menu, click on Embedded Item. This brings up the Embed Item dialog.

  2. Using the Embedded Item drop-down list, select the item that you wish to embed into your document. You can click on [image] to browse for the location of the file.

  3. Using the width field, enter the width that you wish to be displayed for the embedded item. The value may be either an integer (interpreted as a number of pixels) or a percentage of the horizontal space. For example, the value 50% means half the available space while 50 means 50 pixels.

  4. Using the height field, enter the height that you wish to be displayed for the embedded item. The value may be either an integer (interpreted as a number of pixels) or a percentage of the vertical space. For example, the value 50% means half the available space while 50 means 50 pixels.

  5. Click OK.


Create Thumbnail Table

Introduction

The best way to display lots of pictures in a webpage (e.g., for a photo album) is to use a thumbnail table. A thumbnail table contains a small quick loading picture (called a thumbnail) for every picture you want to display. A visitor simply clicks on the thumbnail they want to see, and they follow a link to the full picture.

The Image Thumbnail Table Wizard automatically generates the image thumbnails table and all the associated image webpages from a directory of images.

Start the Image Thumbnail Table Wizard.

To start the Image Thumbnail Table Wizard:

  • On the Insert menu, click on Image Thumbnail Table....

Learn more about different image formats.


Insert Publish Field

Introduction

Publishing Fields are used to automatically insert data into a HTML document at the time of publishing. This data can be inserted:

  1. automatically by HotDog (for example, HotDog could automatically insert the current date each time you publish),

  2. by the user of the document (for example, the user could be prompted to enter a name that will be inserted into the document),

  3. or from a file (for example, HotDog could read a price in a textfile that is regularly updated).

Commonly, Publishing Fields are used in two ways:

  • As part of a template that you create. The information is then inserted (that is, published) as soon as a user opens this HTML document template.

  • For inserting current information into your webpage as soon as you upload (such as the date and time).

How to Insert Publishing Fields into your Document.

  1. On the Insert menu, select Publish Field. This starts the Add Publish Field Wizard.

  2. Select when you want the publishing to take place (i.e. when you want data to be inserted into your document):

When A Document Is Created

This option is usually used for templates. (Read the tutorial about using Publish Fields in Templates.) If you choose By The User in Step 4 below, this would mean that each time you opened your template with the publishing fields in it, HotDog would prompt you to enter in some details.

When A Document Is Published

This option is used when you go to upload your document. That is, when you upload your document you will be prompted to enter some information (such as the date).

  3. Click Next.

  4. Select how the publishing information will be entered:

By The User

By choosing this option, HotDog will prompt you to enter the data prior to publishing. (If you chose the first option in Step 2. above, then you will be prompted when you open your template document. If you chose the first option in Step 2. above, then you will be prompted when you upload your webpage document.)

Automatic

By choosing this option, HotDog automatically inserts the data upon publishing.

From File

By choosing this option, the information will be read from a file and inserted into your document upon publishing.

  5. Click Finish to insert the publishing field into your document.


Publish Fields for Upload

Tutorial: Creating a Webpage Containing Publish Fields

In this tutorial, you are going to create a simple document that inserts a user's name into the document.

Inserting publish fields into your document:

  1. First, open a new document. On the File menu, select New and then click OK.

  2. In your document, between the BODY tags, type: This webpage has been created by

  3. Include a space at the end of the text. Now you want to insert a publish field.

  4. On the Insert menu, select Publish Field. This starts the Add Publish Field Wizard.

  5. Select When A Document Is Published.

  6. Click Next.

  7. The field is to be filled in by the user, so select By the User.

  8. Click Next.

  9. In the Message Text window, enter: Please enter your name.

  10. In the Default Value field, enter Anonymous.

  11. Click Finish to insert the field into your document.

  12. Take the time to have a look at the HTML code that has just been inserted into your document. It should look something like:

This webpage has been created by {{PUBLISH INPUT[[Please enter your name]][[Anonymous]]}}

Saving the webpage:

  1. Now you can save your webpage. On the File menu, select Save As.

  2. Using the Save in drop-down list, select the HTMLFiles directory, under your HotDog directory.

  3. In the File name field, enter demo as the name for your new webpage. Your file will now be publlished as soon as you upload to your server. Alternatively you can publish your files to a directory on your system first, so that you can see what your webpage would look like once you upload it.

Setting your Publish Preferences:

  1. For the purposes of this tutorial we will publish to a local directory instead of the Internet. This is a very useful practice, since it allows you to preview your published webpages before you place them on the Internet. To do this, in the Edit menu, select Preferences.

  2. Select Publish on the tree view of the Preferences dialog (you may need to scroll down the tree view).

  3. Tick the Publish To Directory option.

  4. Now select Directories on the tree view of the Preferences dialog.

  5. In the Published Files field, specify a local directory where your files will be sent when publishing. For example you could specify the following location (note that PublishedFiles is a folder you need to create):

C:\Program Files\Sausage\HotDog6\HTMLFiles\PublishedFiles

  6. Click OK to save the changes.

Publishing the webpage you have created:

  1. Now go the Format menu and select Publish Document.

  2. A dialog will appear to prompt you with your message text: Please enter your name.

  3. In the field, replace Anonymous with your name.

  4. Click OK.

  5. Now open the file that has been published to the directory that you specified in Step 17. If you had used the directory suggested in this step then your file would be located at:

C:\Program Files\Sausage\HotDog6\HTMLFiles\PublishedFiles\demo.html

  6. If, say, you had entered the name Peter Rabbit in Step 3. then the text inserted into your document should now look something like:

This webpage has been created by Peter Rabbit


View Functions

Menu and Toolbar

Every webmaster knows that it's important to be able specify the tools that you need whilst developing your websites and also to remove any unnecessary tools so that you can prevent clutter.

The View functions within HotDog Pro allow you to do all this, including:

  • selecting resource panels to open/close, including opening/closing pre-set resource panel configurations;

  • customizing toolbars and restoring the toolbar default settings;

  • running the Multimedia Manager, which allows you to preview and insert media files as well as run the Insert Image Thumbnail wizard (this wizard guides you step-by-step through the involved process of creating and inserting an image thumbnail table);

  • viewing all fixed and user-defined function, tag and macro shortcuts ;

  • hiding/displaying ROVER and the ROVER ruler.


Resource Panels

Great Resource Management

As more and more functionality was added to HotDog Pro, we had to look for a way of making all of it easily accessible. Menus are too time-consuming. Toolbars, though ideal for most editing functions, aren't powerful enough for really involved tasks. The Sausage solution was to develop resource panels that are controlled by a Resource Manager.

A resource panel is a floating, re-sizable window that groups similar resources and functionality into the same place. Each resource panel performs a specific set of tasks related to website authoring.

The table below displays all the great resource panels controlled by HotDog Pro's Resource Manager:

  1. Local Files

  2. Internet Files

  3. Websites

  4. HTML Property Sheet

  5. HTML Tags

  6. MultiLine Clipboard

  7. Macro Editor

  8. Cascading Style Sheets

  9. Navigation Viewer

  10. Scripts

  11. Extended Characters

  12. Bookmarks/Favorites

  13. SuperToolz

So that you only use the resources that you need during the website development process, our HotDog Team created 5 different resource panel configurations that you can use:

  • FTP Configuration: This displays the Local Files and Internet Files resource panels.

  • Websites Configuration: This displays the Local Files and Websites resource panels.

  • Tags Configuration: This displays the HTML Property Sheet and HTML Tags resource panels.

  • Macro Configuration: This displays the MultiLine Clipboard and the Macro Editor resource panels.

  • All Resources: This displays all resource panels.

Alternatively, to conform to your own website development style, all resource panels can be opened/closed individually. By default, each resource panel is docked to the left/right of the editing window, but can be moved and re-sized to your individual preference. You can also quickly hide/display your resource panels at any time simply by clicking on Show/Hide Resource Panels Button, located in the View toolbar, and selecting from the drop-down list (arrow to the right of the button) the panel that you wish to hide/display.


How To Use Resource Panels/Managers

Introduction.

As more and more functionality was added to HotDog we had to look for a place to put it. Resource Panels were the ideal solution. A Resource Panel is a floating, resizable window that groups similar functionality into the same place. Each Resource Panel performs a specific task related to web authoring.

Usually, functionality that helps you create webpages but does not actually edit them directly can usually be found in the Resource Manager. There are, however, special resources that do edit your page, such as the Extended Characters resource panel, which lets you insert foreign characters into your document.

Resource panels are opened from the View menu or using the resource button on the "View" toolbar.

More details on how to move/resize Resource Panels...

Local Files

The Local Files Manager resource panel is very similar to Microsoft Windows Explorer™. You can use the Local Files Manager to manipulate or filter files. Using Drag and Drop, the Local Files panel provides an easy way of inserting links into your documents. The Local Files Manager was designed to aid with the file manipulation required of larger Websites.

Details...

HTML Property Sheet

The HTML Property Sheet helps you code HTML. It contains all the tags and attributes used by the major browsers, Netscape and Microsoft Internet Explorer. As you type, it continually updates you as to the attributes available in each tag. It also lists each attribute by browser type. The HTML Property Sheet was designed because it has become clear that a professional web designer needs to know every bit of information about every tag/attribute he or she is using, including which browser supports which tag or attribute.

Details...

Websites

Websites are collections of HTML documents. Using HotDog to create a Website on your local computer means that when it comes time to upload to the Internet, one click is all it will take to transfer your work. Using the Websites Manager resource panel greatly reduces the amount of organization required to get you up and running on the Internet.

Details...

Macro Editor

The Macro Editor is used to insert text and tags into your document. Its key advantage is that it can insert text before and after selected text in the document.

Details...

Supertoolz

For quick access to your Supertoolz, the Supertoolz resource panel can be useful. Just double-click on any of the Supertoolz to activate them. Remember, you will need to first install some Supertoolz.

Details...

Internet Files

Using simple Drag and Drop, you can easily upload files to your server. Uploading and downloading files is as simple as dragging them to and from the Internet Files Manager resource panel. The Internet Files Manager also contains the Internet Site Wizard. The Internet Files Manager was created as an easy way to quickly upload and download files, whilst still inside HotDog.

Details...

HTML Tags

HotDog comes with a complete listing of all the HTML Tags we could find - plus a few more. The HTML Tags resource panel is used to define different colors for different tags, create shortcut keys for different tags and for defining your own tags.

Details...

MultiLine Clipboard

We found that it is very useful to be able to drop commonly used text straight into our documents. So we designed the MultiLine Clipboard. It is simply a clipboard with unlimited capacity. It is very useful for storing the syntax for commonly used images and colors.

Details...

Internet Explorer Favorites and Netscape Bookmarks

If you want to insert a link to one of your favorite Websites, then just use the Bookmarks/Favourites resource panel to drag the bookmarked link into your web document and it will be automatically inserted.

Details...

Extended Characters

If you need to insert foreign or unusual characters such as © or ™, use the Extended Characters resource panel. Just drag and drop the characters you need directly into your document.

Details...

CSS

The Cascading Style Sheets resource panel groups your style sheets together and lets you create and edit styles (using a simple graphical interface) as well as organize your styles between different directories.

Details...

Navigation Viewer

The Navigation Viewer panel displays your currently opened and selected webpage hierarchically. That is, it displays how each of the tags are nested in your HTML document, allowing you to see how your pages are structured. Structure is important from the point of view of accessibility. Having an accessible webpage allows all users the ability to easily navigate your webpage.

Details...

Scripts

The Scripts resource panel lets you add events to objects on your web page. An "object" is a thing on your webpage, like a block of text, or an image. An "event" is something that occurs when a user does something to the object. For example, clicking on a link triggers the "click" event - telling the browser to load a new page. However, there are other events as well, such as when the mouse enters the object (mouse enter) or leaves it again (mouse exit).

Details...


Hiding or Displaying Resources

Hiding or Displaying panels

Introduction

When a panel is docked, it is on either the left or right side of the HotDog editing window.

Undocking a Window:

  1. Click and hold the mouse on the top of the panel.

  2. Drag the window to somewhere near the center of the screen.

  3. Let it go. The panel is now floating.

Docking a Panel:

  1. Click and hold the mouse on the top of the panel.

  2. Drag the panel to the left or right side of the HotDog editing window.

  3. Let the mouse go and the panel will automatically dock.

Re-sizing a Floating Panel:

1. Click and hold the mouse over the ‘paw’ on the panel you want to resize (the paw is the bottom right corner of the panel).

2. Resize the panel by dragging it to the required size.

3. Let the mouse go and the panel is resized.

Rolling Up or Unrolling a Panel:

To keep your desktop tidy, floating panels can be rolled up and down. To roll up a panel, just click on the top of the panel once.

Opening any Manager.

Instead of using the View menu to open resource panels from the Resource Manager submenu, you can right-click over the title banner of any resource panel for a quick menu with all the different resource panels listed.

Presets

HotDog also comes with some commonly used Resource Manager configurations. For example, if you do a lot of uploading, then you would usually prefer to have the Local and Internet File managers open.

To select a preset:

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu click on Configurations., then select the configuration you wish to use.


Local Files Manager

Resource Panel

The Local Files Manager is very similar to Microsoft Explorer™. You can use the Local Files Manager to manipulate or filter files. By dragging and dropping, the Local File Manager provides an easy way of inserting links into your documents. The Local File Manager was designed to aid with the file manipulation required of larger Websites.

How to Open the Local Files Manager

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select Local Files.

Right-click over any file in the Local Files Manager.

A menu appears asking if you want to:

  • Insert as Link

  • Open for Editing

The Open for Editing option is available for text or HTML files that you may wish to edit in HotDog. The Insert as Link option places a link from your Web document to the file you clicked on. Select this option if, in the document you are editing, you want to insert a link to another file:

  1. In the Local File Viewer, right click on the file you want to insert.

  2. A link to that file is inserted at the cursor’s position in the document you were editing.

Inserting Images by Drag and Drop.

Inserting images into a webpage is easy. Just open the Local File Manager and drag an image file into your currently opened webpage.

Refreshing the Local Files Resource Panel

You can refresh the file list in the Local Files resource panel by simply clicking in the resource panel and then pressing the F5 function key.


Internet Files Manager

Resource Panel

With the Internet Files Manager, you can easily upload and download files to and from your server. Some of the features of the Internet File Manager include remote creation and deletion of directories on your server. Just right-click over your server to create, rename or delete directories.

What do you want to do?

Open the Internet Files Manager.

Create A New Internet Connection.

Open an Internet Connection.

Upload or Download Files.

Change File Permissions.


Open the Internet Files Manager

Step-by-Step Directions

  1. On the View menu, select the submenu Resource Manager.

  2. In the Resource Manager submenu click on Internet Files.


Open an Internet Connection

Open a Connection To Your Server

Open the Internet Files Manager:

  1. On the View menu, select the submenu Resource Manager.

  2. On the Resource Manager submenu, select Internet Files.

Double-click your server name to open a connection.

In this example, if you wanted to open the Sausage Software Server, you would double click the text ‘Sausage Software’

The following colors are used to indicate the state of your server directories:

This directory’s contents are currently being checked.

This directory’s contents are known.

This directory has yet to be opened.

Now you have established a connection to your server, use the Explorer type interface to navigate. Copying files is simply a matter of dragging and dropping.


Internet File Properties

Internet Files - Change File Permissions

Introduction

The Internet File Properties dialog gives you information regarding a file on your server. This information includes the size of the file, and the permissions assigned to the file.

File Permissions are a way of defining who can read (that is view) and/or write to your file. These file permissions are usually set to allow other people (group) to read (but not write to) your file. In most cases you will never have to touch these settings.

Display the Internet File Properties Dialog.

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select Internet Files.

  3. Open an Internet Connection by clicking on one of the server icons.

  4. Right-click on an Internet file and select Properties.

  5. You can then modify file permissions by using either the checkboxes to set permissions for the Owner, Group and Other user groups, or alternatively you can type a three-digit permission value (usually used in the UNIX CHMOD command) in the text field provided.


Beginner's Guide To Publishing

Introduction

This tutorial will explain to you all the terms and concepts you need to know to feel comfortable with the whole idea of putting stuff on the Internet. With this background behind you, you will be able feel confident tackling any FTP program (well, you may not know what the buttons are but you will know what you want to achieve).

FTP - File Transfer Protocol.

This is a long name for a simple concept. To transfer files over the Internet, the computer sending and the computer receiving the file must communicate using the same lingo or protocol. This protocol specifies how the files are to be passed from computer to computer. This protocol is called a File Transfer Protocol (FTP). The actual mechanics of how the files are passed is not important right now.

What is a Server?

The Server is a computer that is actually connected to the Internet. Apart from this, there is nothing all that special about a Server. The Server can be almost any computer, and the operating system it uses is usually UNIX or Windows NT.

What is a Web Browser?

A browser is the software program you use to browse the Internet. Put simply, Netscape is one, Mosaic is one, Microsoft Internet Explorer is one and a 6:30 train to LA is not one at all.

What is a URL?

A URL can give the address of any webpage on the Internet. A URL stands for Uniform Resource Location. All this means is that there is a unique address for every webpage on the Internet. The Uniform bit refers to a protocol again. URL’s typically look like this:

http://www.sausagetools.com (Sausage Software’s Home Page.)

http://www.netscape.com (Netscape’s Home Page.)

http://altavista.digital.com (Altavista’s Home Page - a search engine).

Just type the URL into your browser and away you go.

What is a Webpage?

A webpage is a document that you can create using HotDog. The language webpages are written in is called HTML. The address of your webpage is partially dependent on the name to which you save your HTML file and partially dependent on the name of your Server.

There is a special webpage called index.htm. You may have noticed during your travels that you don’t have to type the full address of an HTML page. For example, if you were to look at Sausage Software’s Home Page, you need only type http://www.sausagetools.com, and not, http://www.sausagetools.com/welcome.htm. This is because there is some shorthand going on. If you ask for no webpage at all, the server automatically returns a webpage called index.HTML or index.htm

Because of this, it is convention to have the index.htm page as your welcome page. So you should name the welcome page index.htm. This way, when people browse to your Website, they need only type (say) http://www.surfnet.com/~yourname and not http://www.surfnet.com/~yourname/index.htm.

How does the Internet actually work?

The Internet is one serious amount of computers connected together. The most important aspect of these linked computers is the ability to get information from one computer to another.

So what actually happens when you surf?

1) First off, you type a URL into your browser. For example:

http://www.surfnet.com/~elisefowler/welcome.htm

2) Your computer sends out a message to the server called www.surfnet.com asking for the webpage called welcome.htm belonging to Elise Fowler.

3) Elise Fowler’s server then looks in a special directory that Elise uses for her webpages. The server is looking for a file called welcome.htm. If this file cannot be found, a message is returned to your web browser. This message is usually along the lines of URL not found.

4) Assuming the file welcome.htm is found, this file is copied from Elise’s server to your server and then on to your personal computer. You can now view the contents of Elise’s welcome.htm file using your Browser.

The key points to notice here are:

  • Every server has a unique name.

  • Your server looks in a particular directory for your webpages.

So now the entire functionality of the ‘Upload’ FTP program can be explained. You are simply being asked for the answers to the following questions:

  1. Which server do you want to upload your files to?

  2. Which directory on that server to load your files into?

  3. Which files do you want to upload?

If you keep this in mind when using FTP for the first time, the prospect will seem much less daunting.

Final Note

If you don’t know the answer to any of the above questions there is one person that can certainly help you out: your friendly ISP (Internet Service Provider). Your ISP is in charge of your server and they should know all the answers to your queries.

So send your ISP an email with the following questions (the email address is usually help@ Your_ISP_Name.com):

Hi,

I want to upload some files to the server with the aim of putting them on the Internet.

I need to know the following:

What is the address of my server?

What directory should I upload these files to?

What URL would I use to view my index.HTML file once I have uploaded it?

Thanks for your time

Regards,


HTML Property Sheet

Introduction

The HTML Property Sheet helps you code HTML. It contains all of the tags and attributes used by the major browsers: Netscape and Microsoft Internet Explorer.

For the user who wants their Web pages to look great in every browser, the HTML Property Sheet is an invaluable tool: it presents the tags and their attributes to you in a list sorted by browser-compatibility.

All the attributes of each tag are listed in the HTML Property Sheet under browser headings, showing what browsers support each attribute. So, if you want to avoid attributes particular to certain browsers, it is easy to do so. Essentially, the guesswork is taken out of how your Web page will look under different browsers. In conjunction with Code Completion, you can now create documents faster than ever before.

For the beginner, the HTML Property Sheet offers a fun and easy way of experimenting. Unfamiliar with a tag or attribute? Just use the top panel of the Property Sheet to add code to your document and see how it affects your Web page. Also, every tag and every attribute has help that is displayed in the bottom panel of the HTML Property Sheet. With this sort of practice, it will only be a short time before you become familiar with the entire HTML language.

To open the HTML Property Sheet:

  1. On the View menu, select the submenu Resource Manager.

  2. In the Resource Manager submenu, click on HTML Property Sheet.

For further information, take a look at the help topics listed below.

  • Inserting Attributes into Tags.

  • An Example of Using the HTML Property Sheet.

  • Cascading Style Sheet Support in the HTML Property Sheet

  • Customizing the HTML Property Sheet

Also see Code Completion for a quick way of inserting tags into your document.


Inserting Tags into Your Document

To Insert HTML Tags and Attributes into your Document Using the HTML Property Sheet:

  1. Place your cursor in the HotDog Editor (the editing window), where you would like to insert your HTML Tags. A list of Available Tags should appear in the top panel of the HTML Property Sheet. If it doesn't then most likely the Property Sheet is still displaying the properties of another set of tags that your cursor is sitting within. If this is the case, just press <ENTER> or <RETURN> twice on your key board, then move your cursor up once to get the Available Tags list to display.

  2. Enter the HTML Property Sheet by pressing <CTRL> + < ENTER>.

  3. Using the arrow keys, scroll through the list of Available Tags, and hit <ENTER> on the tag that you wish to insert. The tag will then be inserted into the editing window. HotDog automatically returns you to the Editor, ready to insert any attributes if you need them. A list of attributes for this tag will appear in the top panel of the HTML Property Sheet. All the attributes are listed according to HTML specification and by the browsers that support them.

Tag attributes are inserted in the same way as tags.

To Insert HTML Tags and Attributes into your Document Whilst Editing:

  1. Start typing the tag you wish to insert. A list of suggestions for this tag will be displayed in the bottom panel of the HTML Property Sheet.

  2. In the Suggestions list, double-click on the tag you wish to insert.

Example - Entering the <TABLE> Tag:

  1. First, you need to have the HTML Property Sheet open. To do this, on the View menu, select Resource Manager. Then on the Resource Manager submenu, select HTML Property Sheet.

  2. Type: <t

  3. In the bottom panel, the HTML Property Sheet will short-list all tags beginning with T. Do one of the following:

  • Enter the HTML Property Sheet by pressing <CTRL> + < ENTER> and use the up or down arrow keys to select the <TABLE> tag.

  • Further type the letter a in the editing window (as in: <ta ) so that only the <TABLE> tag will appear in the list of suggestions. Enter the HTML Property Sheet by pressing <CTRL> + < ENTER>.

  4. Press <ENTER> again to insert the <TABLE> tag into your document.

HotDog automatically returns you to the Editor, ready to insert any attributes if you need them.

Press <CTRL> + <SPACE> if you wish to insert attributes using Code Completion.

NOTE

  • If you would like your tags to be closed automatically upon insertion, then:

  1. In the Edit menu, select Preferences.

  2. In the Preferences dialog, browse to the [Editing Window][Code Completion] panel.

  3. Tick the Automatically Close Tags check box.


Inserting Attributes into Tags

Introduction

When you type or enter a tag's name into the HotDog document editor screen, and place the text insertion cursor inside the tag, the attributes for that tag are displayed in the top panel of the HTML Property Sheet (your cursor needs to be within the tag and the HTML Property Sheet needs to be open). All the attributes are listed according to HTML specification and by the browsers that support them.

To Insert an Attribute:

  1. Ensure that your text insertion cursor is located inside a HTML tag's angle brackets (i.e. between the < and > characters). Enter the HTML Property Sheet from the Editor by pressing <CTRL> + < ENTER>.

  2. Using the arrow keys, scroll through the list of attributes for the tag you have specified. Notice how the bottom panel changes to display help for the properties of each attribute selected.

  3. Enter values into the Attribute Fields for any attributes you wish to specify for the tag.

NOTE

  • If you would like your tags to be closed automatically upon insertion, then:

  1. In the Edit menu, select Preferences.

  2. In the Preferences dialog, browse to the [Editing Window][Code Completion] panel.

  3. Tick the Automatically Close Tags check box.


Example of Using the HTML Property Sheet

Short Tutorial

  1. Click [image] to open a new HTML document.

  2. On the View menu, select the submenu Resource Manager.

  3. In the Resource Manager submenu, click on HTML Property Sheet.

  4. Type <HR into your document.

  5. Press <CTRL> + < ENTER> to take your cursor to the HTML Property Sheet.

  6. In the Property Sheet, you can use the arrow keys to select different attributes of the <HR> tag. Notice how the bottom panel changes to display the properties of each attribute selected. Use the arrow keys to select the SIZE attribute.

  7. Enter a value of 10 into the SIZE attribute field (this specifies a thickness of 10 pixels for your horizontal rule) and press Enter. Notice that the SIZE attribute has been inserted into your <HR> tag.

  8. Press <CTRL> + < ENTER> to return to the HTML Property Sheet.

  9. Use the arrow keys to select the WIDTH attribute. Enter a value of 100 into the WIDTH attribute field (this specifies a horizontal width of 100% for your horizontal rule) and press Enter.

  10. Press <CTRL> + < ENTER> to return to the HTML Property Sheet.

  11. Use the arrow keys to select the NOSHADE attribute and press Enter (this specifies that horizontal rule be displayed as a solid colored line instead of a two-colored groove).

  12. Close the tag by entering the > character.

You can use this technique to edit any tags in your Web page. One of the advantages is that many attributes are listed that you may not have been aware of. By quick and simple experimentation, you can fine-tune the presentation of your webpage.

NOTE

  • If you would like your tags to be closed automatically upon insertion, then:

  1. In the Edit menu, select Preferences.

  2. In the Preferences dialog, browse to the [Editing Window][Code Completion] panel.

  3. Tick the Automatically Close Tags check box.


Wrapping Tags Around Selected Text

Introduction

The method of wrapping tags around selected text using the HTML Property Sheet is the same as the method used for inserting tags, with the only difference being that you must select some text first, before you insert your tags.

To Insert Tags around Selected Text:

  1. Select the text in your Editor that you wish to wrap. A list of Available Tags should appear in the top panel of the HTML Property Sheet. If it doesn't then most likely the Property Sheet is still displaying the properties of another set of tags that your selection is sitting within. If this is the case, place a carriage return before the text you wish to select. You can do this by placing your cursor before the text and pressing <ENTER> . Then re-select the text again, including the carriage return to get the Available Tags list to display.

  2. Enter the HTML Property Sheet by pressing <CTRL> + < ENTER>.

  3. Using the arrow keys, scroll through the list of Available Tags, and hit <ENTER> on the tag that you wish to insert. The tag will then be inserted into the editing window. HotDog automatically returns you to the Editor, ready to insert any attributes if you need them. A list of attributes for this tag will appear in the top panel of the HTML Property Sheet. All the attributes are listed according to HTML specification and by the browsers that support them.

To Insert Attributes within the Wrapping Tag:

  1. Enter the HTML Property Sheet from the Editor by pressing <CTRL> + < ENTER>.

  2. Using the arrow keys, scroll through the list of attributes for the tag you have specified. Notice how the bottom panel changes to display the properties of each attribute selected.

  3. Enter values into the Attribute Fields for any attributes you wish to specify.

  4. Once you have entered values for all the attributes you wish to specify, press <CTRL> + <ENTER> to return to the Editor.

NOTE

  • If you would like your tags to be closed automatically upon insertion, then:

  1. In the Edit menu, select Preferences.

  2. In the Preferences dialog, browse to the [Editing Window][Code Completion] panel.

  3. Tick the Automatically Close Tags check box.


CSS Support

Introduction

In addition to "vanilla" or plain HTML, the HTML Property Sheet supports CSS (Cascading Style Sheet) rules. Using the HTML Property Sheet, you can edit the properties and values of CSS declarations.

Whether your CSS rules are embedded in your HTML document, or defined in a separate CSS file which will be linked to your HTML documents, the process of editing the CSS declaration properties and values is the same.

To Edit CSS Declaration Properties and Values

  1. Ensure that the HTML Property Sheet is open.

  2. Within the document that is displayed in the editing window, place the text insertion cursor inside the curly-brace brackets where the CSS declaration's properties and values are listed.

  3. Press <CTRL> + <ENTER> to enter the HTML Property Sheet.

  4. In the HTML Property Sheet, navigate to the property that you want to enter a value for (using the arrow keys or the <Page Up> and <Page Down> keys).

  5. Type the value for the property in the appropriate property's Attribute Field, to the right of the property name in the HTML Properties Sheet.

  6. Press <ENTER> to confirm your entry. The value and property will be added to the CSS declaration in your document.

  7. Press <CTRL> + <ENTER> to return the focus back to the document, where you can continue typing.


Navigation Viewer

Resource Panel

The structure of a webpage is important. High-end HTML documents often contain thousands of lines of code. Gun Coders need ways to quickly open large text documents and quickly locate the code they want to edit. The Navigation Viewer is used to help you navigate through your document, correcting errors and describing structure.

The panel in the Navigation Viewer displays your currently webpage hierarchically as a structured tree view, which can be filtered to show all tags, specific tag types or just major HTML objects. That is, it displays how each of the tags are nested in your HTML document, allowing you to see how your pages are structured.

Structure is important from the point of view of accessibility. Good webpage structure helps you to create ordered content and makes your webpage more accessible for your viewers and to other authors. Having an accessible webpage allows all users the ability to easily navigate your webpage.

  • When you click on a tag in the Navigation Viewer, HotDog automatically jumps to that tag in the editor. Double-clicking on a tag will select all content between the specified opening and closing tags.

  • Right-clicking any tree item will offer options to select or collapse the current tag in the document. Double-clicking an item in the tree view will open its corresponding dialog (if one is available) with all current attributes ready for quick editing.

  • You can also limit the tags displayed in the navigation viewer and use the Navigation Toolbar to help you navigate.

  • All Accessibility errors are displayed at a glance in the HTML Navigation View. Double-clicking any item in the tree view will open the appropriate HotDog dialog to add accessibility options.

EXAMPLE

Say you have created a structured document. The document would contain heading tags (H1, H2, etc.), with each heading describing the content of the paragraph(s) below. The advantages to you are obvious, as you can easily navigate through your own content. However, the advantages to your viewers are many - especially those who use special software to "view" webpages (e.g., text-to-speech translators). For example, a person using a text-to-speech translator can have the headings for each part of the document read without having to explore each paragraph's content. For other viewers, being able to quickly determine a paragraph's content saves on time and lowers frustration levels.

Opening the Navigation Viewer

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select Navigation Viewer.

Using the Navigation Viewer

When you click on a tag in the Navigation Viewer, HotDog automatically jumps to that tag in the editor. Double-clicking on a tag will select all content between the specified opening and closing tags.

You can limit the tags displayed in the navigation viewer using the Navigation Toolbar.

Viewing Errors

Any tags that have errors (say image tags without a source) will be shown in red. Double-clicking on these error tags will open the dialog responsible for that tag, allowing you to quickly fix any errors.

Accessibility

Click [image] to check your webpage for accessibility. Should any access problems be highlighted [image] within your document, double-click on the affected tag to open the relevant dialog, so that you can fix any errors. If you would like to learn more about designing for accessibility using HotDog Pro, read the discussion on Accessibility or about Accessibility Attributes.

You can also check for Accessibility using the the Insert Menu.


Scripts Resource Panel

Scripts

Resource Panel

The Script Resource Panel lets you create JavaScript code that enhances your webpage. The Scripts resource panel gives you the power of incorporating and editing events and actions to objects on your webpages through the use of pre-configured JavaScript functions (ScriptBits).

  • "Objects" on your webpage are such things as blocks of text, images, links, etc.

  • An "event" is something that occurs when someone viewing your webpage does something to the object.

  • An action is what occurs when the event has taken place.

For example, clicking on a link is an "event" that triggers the "action" of telling the browser to load a new page.

Using the Scripts resource panel, you can now specify these kind of event-action rules to any other objects on your own webpages. Just select the object you wish to add an event-action rule to and away you go!

Tutorial

The tutorial below shows you how to create a simple message window.

Step 1. Creating a Link.

  1. In HotDog, close all the open documents. To do this from the Window menu, select Close All.

  2. Now create a new document by doing one of the following:

  • Pressing <CTRL> + <N>.

  • Click [image] on the File Toolbar.

  3. Add the following anchor (link) to your document, between the <BODY> tags:

<A HREF="http://www.sausagetools.com">Jump to Sausage</A>

  4. From the File menu, select Save As...

  5. In the Save As dialog, use the Save in: drop-down list to navigate to the Sausage\HotDog6\HTMLFiles directory.

  6. In the File name field enter the name ScriptsDemo for your new HTML document.

  7. Click Save.

Step 2. Opening the Scripts Resource Window.

  1. From the View menu, select the Resource Manager submenu.

  2. From the Resource Manager submenu, click Scripts.

Step 3. Adding an Event.

  1. In your ScriptsDemo document, place your cursor within the opening anchor tag:

<A HREF="http://www.sausagetools.com">

  2. In the Scripts Resource Panel, click [image] to add a new script.

  3. In the Create a new ScriptBit dialog, type the name myscript for your new script.

  4. Next to the Event field, click [image] , select Mouse and then select Clicked.

  5. Next to the Object field, click [image] and select Add Object ID.

  6. In the Add Object ID window, double-click on the opening anchor tag:

    <A HREF="http://www.sausagetools.com">

  7. Enter the ID name LINKID for your anchor tag.

  8. Click OK.

  9. Click Close.

  10. Next to the Action field, click [image] , select Dialog and then select Alert.

  11. In the Parameters panel, next to Message, type Linking to Sausage Software.

  12. Click OK.

Step 4. Previewing your Webpage.

  • Press F9 to preview your web page. When you click on the link, your message will appear.


MultiLine Clipboard

Resource Panel

When working with a few documents, it is convenient to be able to store multiple portions of different text and insert commonly used text straight into documents. The MultiLine Clipboard is a floating clipboard that can store up to 100 sections of text and HTML code of commonly used images and colors. Just drag in any text/code you want to save and drag out (or double-click on) any that you want to paste into your document. All the clipboard sections can also be easily exported to HotDog macros.

What do you want to do?

Open the MultiLine Clipboard Manager.

Insert some Text into the Multline Clipboard.

Paste some Text from the MultiLine Clipboard into a Document.


Open the MultiLine Clipboard

Step-by-Step Instructions

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select MultiLine Clipboard.


Insert Text Into The MultiLine Clipboard

Step-by-Step Instructions

  1. First open the MultiLine Clipboard resource panel. On the View menu, select the Resource Manager submenu, and then select MultiLine Clipboard.

  2. Highlight some text in your document. Then drag it into one of the free rows in the MultiLine Clipboard.

Using Shortcut Keys to Insert Text

You have the option of inserting text into the MultiLine Clipboard using shortcut keys instead of using your mouse. To do this, first make sure that you have this option set in your Preferences. To set this option in your preferences:

  1. In the Edit menu, select Preferences.

  2. Select General on the tree view of the Preferences dialog.

  3. Tick the MultiLine Clipboard uses shortcut keys check box.

Now, to insert text into the MultiLine Clipboard , type [Alt] + [SHIFT] + the row number you wish to assign to the text in the MultiLine Clipboard. For example, if you wish to insert the text into row 9 of the Multiline Clipboard, then you would type [ALT] + [SHIFT] + [9].


Paste Text from the MultiLine Clipboard to a Document

Step-by-Step Instructions

  1. First make sure the MultiLine Clipboard resource panel is open. On the View menu, select the Resource Manager submenu, and then select MultiLine Clipboard.

  2. In the MultiLine Clipboard, select the row containing the text you wish to paste.

  3. Drag the text onto the section of your document where you wish to paste.

Using Shortcut Keys to Paste Text

You have the option of pasting text into your doucment using shortcut keys instead of using your mouse. To do this, first make sure that you have this option set in your Preferences. To set this option in your preferences:

  1. In the Edit menu, select Preferences.

  2. Select General on the tree view of the Preferences dialog.

  3. Tick the MultiLine Clipboard uses shortcut keys check box.

Now, to paste text into your document, type [Alt] + the row number assigned to the text in the MultiLine Clipboard. For example, if the text you wish to paste into your document is in row 7 of the Multiline clipboard, then you would type [ALT] + [7].


Websites - Overview

State-of-the-Art Website Management

Webmasters have long been demanding a HTML Editor with advanced website management facilities. HotDog Pro 6 plugs the gap with full-featured website management tools that make creating and maintaining large websites both fun and easy.

Websites are collections of HTML documents. Using HotDog to create a website on your local computer means that when it comes time to upload to the Internet, one click is all it will take to transfer all your documents. Using the Websites manager greatly reduces the amount of organization required to get you up and running on the Internet.

Keeping all your HTML and associated files together can be difficult. Using the HotDog Websites manager is an easy way to group files (belonging to a particular website) together. When you upload a website to the Internet, all the files in that website are uploaded along with it.

By using the Website Wizard, you can quickly and easily define your own websites. With no proprietary web servers necessary, you can use HotDog Pro to define any file structure as a website and perform site-wide editing functions on all of those files. When you upload a website to the Internet, all files in that website are uploaded along with it.

HotDog now caters to the needs of designers of very large websites. HotDog Websites supports a complete multi-user environment with complete file locking and task management facilities. The new implementation of Tasks allows a website to be designed coherently by coordinating the work of many people. All site changes are updated on the fly on all users' machines in a networked environment. All basic functionality required of multi-user support has been included. For example, HotDog Pro will detect two users trying to edit the same file at once and will send a warning.

The true versatility of HotDog websites is that they don't tie you down to any system or program. Any group of HTML documents can be made into a HotDog website and can be used and edited by other software. While using HotDog websites you gain the benefits of many features.

The Websites Manager resource panel includes:

  • the ability to define all website properties and preferences;

  • a powerful file management interface, making it possible to create, add, remove and edit website files within a single view;

  • preserved document states (that is, any bookmarks and collapsed text you create are remembered);

  • a multi-user interface that allows teams of webmasters, working on a local network, to define their website on a shared network drive;

  • the ability to assign and schedule tasks for project management purposes (a task is a formal note that is attached to a document in a website - it contains information about the nature of the task to be completed, due dates, etc.);

  • an internal website browser, allowing you to view and navigate your website as it will appear on the internet, as well as add tasks to any pages that need work;

  • the ability to perform website-wide replace procedures on text, document properties (BODY tags) and document information (META tags);

  • style-sheet integration;

  • an error-checker to verify and edit all links and resources used in your website (entire sites can be checked for broken links and errors corrected across many pages with one action, and external resources, such as image files, are automatically collected and links updated ready for publishing);

  • alterations to backgrounds, new meta tags or text block multi-find and replacements achieved with one action;

  • one button uploading or publishing - that is, the ability to easily publish an entire website (or only the changes to your website) both locally and remotely.

What Do You Want To Do?

Open the Websites Manager.

Beginner’s Guide to HotDog Websites.

Advanced Guide to HotDog Websites.

General Website Functionality. (The Websites Tab)

Includes: Creating new Websites, Website Properties, Uploading Websites (or Publishing Websites), Editing BODY and META Tags for every document in a Website, Website Wide Find and Replace, Adding and Removing files to and from a Website and Style Sheets.

Using Tasks with Websites. (The Tasks and Browse Tabs)

Includes: Adding and Removing Tasks to a Website, Some Tips on Multi-User Website Construction. Using the Integrated Website Browser with the Task Manager.

Checking Websites for Errors. (The Checks Tab)

Includes: Link Checking, Optional External Link Checking, and Resource Gathering (i.e. for images and other resources that are linked to locally but do not lie within the website's Document Directory).


Create A New Website

Step-By-Step Instructions

  1. First open the Websites Manager: On the View menu, select the Resource Manager submenu and then select Websites.

  2. In the Website Manager resource panel, make sure the Websites tab is selected.

  3. Click [image] to open the Website Wizard. The Website Wizard will guide you through the process of creating a new Website.

To change any of the settings you have specified after creating your website, just right-click on the website file and select Properties. All your website files can be identified by the following website file icon:

What Do You Want To Do?

Learn more about the Website Wizard.

Read the Beginner's Guide to Websites.

Read the Advanced Guide to Websites.


Website Wizard

Introduction

The Website Wizard guides you through a step-by-step process of creating a new website. If you are new to the Internet, you might want to follow the example below when creating your Website. If you would like a more comprehensive understanding of creating websites with HotDog, read the Beginner's Guide and/or Advanced Guide to Websites tutorials.

To change any of the settings you have specified after creating your website, just right-click on the website file and select Properties. All your website files can be identified by the following website file icon:

Step 1. Opening the Websites Manager Resource Panel.

  1. First open the Websites Manager: On the View menu, select the Resource Manager submenu and then select Websites.

  2. In the Website Manager resource panel, make sure the Websites tab is selected.

Step 2. Starting the Website Wizard.

  • Click [image] to open the Website Wizard. The Website Wizard will guide you through the process of creating a new Website.

Step 3. Creating a New Website.

There are three ways you can create a Website:

Creating new Website

If you don't want to import an existing Website, select this option and then click Next.

Create from local directory structure

If you already have a Website on your computer, which you want to use in HotDog, select this option and click Next.

Create from WebServer (FTP)

If you have no local copy of your Website, but do have a copy on a Web server, HotDog can retrieve it for you and copy it to your hard drive. To do this, select this option and click Next. In the Choose Directory... dialog that appears, you will then be presented with a list of FTP servers. If your Website is not listed then you will need to define the location of your Website. To do this:

  1. From the FTP Server drop-down list, select Add Internet Site. This opens the Internet Site Wizard.

  2. Go through the Wizard steps to define the server address of the website you wish to retrieve.

  3. After creating the new server, use the FTP Server drop-down list, to select the new server. This will create a connection to this server and display the file directory there.

  4. Select the server directory where your website is located.

Step 4. Deciding Upon a Name and Location For Your Website.

  1. Now you have to decide upon a name for your website. This name will be used for your reference only - so make it anything you like.

  2. This location is a directory on your hard drive where your website will be stored. Choose a base directory on your computer for your website files. This directory is important because all files are referenced relative to it. This may be new terminology for you, so the concept of relative referencing is fully explained in the Absolute and Relative References tutorial. If you want to become familiar with HTML this tutorial is highly recommended reading. You may want to read it before proceeding.

  3. Click Next to continue...

Step 5. Publishing Options.

You can publish your website to a directory (if you were using an Intranet say) or to the Internet.

Publishing to the Internet.

  1. Click Publish to Remote Web Server.

  2. Use the drop-down list to select the web server to which you want to publish. If the server you want to connect to is not in the list you can define it now by clicking the Add Site button. This opens the Internet Site Wizard. You can use the Wizard to define the server address of the website you wish to retrieve. If you are not sure what your server address is have a look at the Beginner's Guide to Publishing tutorial.

  3. Click Next.

  4. A summary of your server details is listed here. After checking that the details are correct, click Next.

Publishing to Local Directory.

  1. Click [image] to select the directory to which you wish to publish.

  2. Click Next.

Step 6. HTML Documents.

The file types in the list box are those that HotDog treats as HTML documents. It is unlikely you will need to change these settings, however, below are instructions on how to do so.

Adding a New File Extension.

  1. Click Add.

  2. Enter the name of the extension you want to add (with out the '.').

Removing a File Extension.

  1. Click on the extension you want to remove.

  2. Click Remove.

Step 7. Linked Files To Publish.

The linked files specify which files will be published along with your HTML files. Usually you will want to publish all linked files. To do this, ensure that every check box has been ticked.

Step 8. Publishing Options.

There are three publishing options. Each deals with the different ways HotDog treats files at the publishing location. Decide whether you want HotDog to overwrite existing identical files on your server or not. If you are unsure, select Always Overwrite Existing Files.

Always Overwrite Existing Files.

HotDog will automatically overwrite any existing files as it is publishing.

Ask Whether To Overwrite Existing Files.

If a file already at the publishing location has the same name as a file about to be published, HotDog will ask you to confirm whether you really wish to already published file.

Only Publish Files Newer than those at Publishing Location.

HotDog will only publish those files that are newer (i.e. changed) from those at the publishing location.

Step 9. Style Sheets.

Select the Create Default Style Sheet option if you want HotDog to automatically create a style sheet for your website. Otherwise you can link an external style sheet to your website.

Step 10. Create Website Home Page.

Ticking the Create Website Home Page check box automatically creates an index.HTML file for you. The index.HTML file is a webpage that is automatically passed to your viewers' browsers when they try to view your Website but don’t specify a file to open (this is the difference between entering the URL http://www.sausagetools.com and http://www.sausagetools.com/index.HTML).


General Websites Functionality

Introduction.

The Websites Manager Tabs control most of the basic functionality for building websites. Here you can create new websites, add or remove documents to and from a website and more. The website-wide find-and-replace is one of the most important features on this panel. It lets you makes changes to all documents that form part of your website.

Furthermore, using the simple wizards included in the website-wide find-and-replace, you can make changes to the BODY and META tags (i.e. all your Document Properties such as text color etc.) in all the documents in your website in one go.

What Do You Want To Do?

Create a New Website.

Open or Close a Website .

Edit a Website ’s Properties.

Upload a Website .

Website-Wide Find-and-Replace (including BODY and META tag editing).

Add a New Task to a Website .

Check a Website for Errors.

Add or Remove Documents To And From a Website.


Opening And Closing Websites

Open Or Close a Website

First, Open the Websites Manager:

  1. On the View menu, select the Resource Manager submenu.

  2. Under the Resource Manager submenu, select Websites.

  3. In the Websites Manager resource panel, make sure that the Websites tab is selected.

All websites are displayed with the following website file icon:

To Open An Existing Website:

  1. Click [image].

  2. Locate and select the website you want to open. Websites files have a .HWS extension.

  3. Click Open. All the HTML documents in your website will then be opened within HotDog.

To Close An Open Website:

  1. Select the website you wish to close.

  2. Click [image].


Add Or Remove Files To And From A Website

Add Or Remove Topics To And From A Website

First, Open the Websites Manager:

  1. On the View menu, select the Resource Manager submenu.

  2. Under the Resource Manager submenu, select Websites.

  3. In the Websites Manager resource panel, make sure that the Websites tab is selected.

To Add a File to Your Website:

  1. Right-click on the website to which you want to add a file.

  2. Select Add Documents to Folder....

  3. Use the Look in: drop-down list to locate the file(s) you want to add to your website.

  4. Click on the file(s) you want to add - hold the <SHIFT> key down for multiple selections.

  5. Click OPEN to add the files to your website.

To Remove a File From Your Website:

  1. Double-click on the website (all websites are displayed in the top panel) you want to remove a file from.

  2. In the website file list (bottom panel), right-click on the file you want to remove.

  3. Select Delete.


Website Properties - Overview

Introduction

Each website contains its own unique properties. These properties describe the server address (i.e., where you want to upload your work to) and where your document directory resides.

To access these properties:

  1. On the View menu, select the Resource Manager submenu.

  2. Under the Resource Manager submenu, select Websites.

  3. In the Websites Manager resource panel, make sure that the Websites tab is selected.

  4. All websites are displayed with the following website file icon: . Right-click over a website name and select Properties.

The properties of each HotDog Website are divided into the following groups (or windows):

General Properties

This window describes the name of the website and how long you have been working on it.

Directories

The directories window contains the default location of documents that form part of your website. The Document Directory is very important as it defines the directory structure that your Website will use on your server. This whole concept is greatly expanded upon in the tutorial described in the Websites Tutorial.

File Types

The File Types define which files in your website will be treated as HTML files by HotDog Pro. This is iso that HotDog can check these files for such things as broken links.

Web Server

The web server window contains the address of the web server used for your Website. For more details on what a web server is, and how to find out what address you should be uploading to, have a look at the Beginners Guide to Publishing.

Upload Options

The upload options let you determine which files associated with your webpages are uploaded.

Publishing

When you go to upload your files, you can automatically change the format of your documents. Publishing usually involves making the occasional word substitution, or converting extended characters to their HTML equivalents.


Websites - General Properties

General Properties

To open the General Properties window:

  1. On the View menu, select the Resource Manager submenu, and then select Websites.

  2. In the Websites Manager resource panel, make sure that the Websites tab is selected.

  3. All websites are displayed with the following website file icon: . Right-click over a website name and select Properties.

  4. Select General on the tree view of the WebSite Properties dialog.

The Project Name defines the name of your website.

Also listed are when the website was created, last accessed and how long you have been working on it.

NOTE

  • In Step 3. above, you should be right-clicking over the website name, not any of the files that are included with the website.


Website Directories

Websites - Directories

Local Website Directories

To open the Directories Properties window:

  1. On the View menu, select the Resource Manager submenu, and then select Websites.

  2. In the Websites Manager resource panel, make sure that the Websites tab is selected.

  3. All websites are displayed with the following website file icon: . Right-click over a website name and select Properties.

  4. Select Directories / Backups on the tree view of the WebSite Properties dialog.

From this window you can set the different directories that make part of your website.

Documents Directory

The Documents Directory is most important, as it and the Web Server Directory define where your files will end up when they are uploaded.

For example, if you store all the HTML files that make up your website in the following directory:

C:\Program Files\HotDog6\HTML Files\Website_Files

and define this directory as your Documents Directory, and also set your Web Server directory to Public_HTML, then when you upload your website, all the HTML files in the Website_Files directory will be copied to the Public_HTML directory on your server.

For more details, see the Beginner's Guide to Websites tutorial.

Local Upload Directory

This directory allows you to upload your website locally to your computer or onto an intranet.

This can be especially useful if you have added publish fields to your document and would like a local copy of the published website. Doing this also allows you to see what the published documents will look like prior to uploading to your server.

To upload to a local directory, you need to select Upload Options on the tree view of the WebSite Properties dialog and tick the Upload to Local Directory check box.

Website Home Page

This simply specifies the document within your website that is your home page. Your home page should be within your Documents Directory. For instance, using the example above, if your homepage is named index.html then your home page address could be:

C:\Program Files\HotDog6\HTML Files\Website_Files\index.html

Website Backups

If you wish to save a backup of your website then you can specify the directory to which it will be saved.

NOTE

  • In Step 3. above, you should be right-clicking over the website name, not any of the files that are included with the website.


Website Properties - File Types

Introduction

The File Types define which files in your website will be treated as HTML files by HotDog Pro. This is iso that HotDog can check these files for such things as broken links. To open the File Types Properties window:

  1. On the View menu, select the Resource Manager submenu, and then select Websites.

  2. In the Websites Manager resource panel, make sure that the Websites tab is selected.

  3. All websites are displayed with the following website file icon: . Right-click over a website name and select Properties.

  4. Select File Types on the tree view of the WebSite Properties dialog.

NOTE

  • In Step 3. above, you should be right-clicking over the website name, not any of the files that are included with the website.


Websites - Server Properties

Server Properties

To open the Web Server Properties window:

  1. On the View menu, select the Resource Manager submenu, and then select Websites.

  2. In the Websites Manager resource panel, make sure that the Websites tab is selected.

  3. All websites are displayed with the following website file icon: . Right-click over a website name and select Properties.

  4. Select Web Server on the tree view of the WebSite Properties dialog.

Use the drop-down list to specify the server to which you wish to upload the website. If the server you want isn't included in the list then click on Add Site to define additional server information.

Server Information

Server Address

The Server Address is the unique address of your Server. The Server is the computer that you connect to when you want to browse the Internet. It displays your webpages to anyone who visits your website. For example, Elise might enter: www.woodnet.com

Web Server Directory

This is the directory in which your server looks to try to find your webpages when a visitor wants to view them. The Web Server Directory is most important, as it is this and the Website Document Directory that define where your files will end up when they are uploaded. The usual directory web server directory is public_html or www. Your ISP should have told you the name of this directory.

For example, assume you have defined your Web Server Directory to be: Public_HTML\Website1 and you have stored all the HTML files that make up your website in the following Website Document Directory in your computer: C:\Program Files\HotDog6\HTML Files\Example Website. Then when you upload your website all your HTML files will be copied to the Public_HTML\Website1 directory on your server.

For more details, see the Beginner's Guide to Websites.

User Name

Your user or login name is given to you by your ISP (Internet Service Provider - the company that gets you connected). The login name and password uniquely identify who you are when it comes to uploading your work. ISPs don't want just anyone uploading to their Server!

Password

Your password is also provided by your ISP. If you don't know it, you will need to get in contact with them. Instructions on how to do this are provided in the tutorial described below.

If any of the terms above are unfamiliar to you, or you don’t know all of the details, have a look at the Beginner's Guide to Publishing.

Port

The usual port number is 21. Don’t change this default value unless your ISP tells you to do so.

Time Out

This time determines how long HotDog tries to log on to your server.

NOTE

  • In Step 3. above, you should be right-clicking over the website name, not any of the files that are included with the website.


Websites - Upload Options

Website Upload Options

To open the Uploading Options Properties window:

  1. On the View menu, select the Resource Manager submenu, and then select Websites.

  2. In the Websites Manager resource panel, make sure that the Websites tab is selected.

  3. All websites are displayed with the following website file icon: . Right-click over a website name and select Properties.

  4. Select Upload Options on the tree view of the WebSite Properties dialog.

Upload Location

Ticking the Upload to Local Directory check box upload your website locally to your computer or onto an intranet. This can be especially useful if you have added publish fields to your document and would like a local copy of the published website. Doing this also allows you to see what the published documents will look like prior to uploading to your server.

File Management

There are three uploading options. Each deals with the different ways HotDog treats files at the upload location. Decide whether you want HotDog to overwrite existing identical files on your server or not. If you are unsure, select Always Overwrite Existing Files.

Always Overwrite Existing Files.

HotDog will automatically overwrite any existing files as it is uploading.

Ask To Overwrite Existing Files.

If a file already at the upload location has the same name as a file about to be uploaded, HotDog will ask you to confirm whether you really wish to already uploaded file.

Only Upload Files Newer than those on Server.

HotDog will only upload those files that are newer (i.e. changed) from those at the upload location.

Upload Tags

To open the Upload Tags window:

  1. Follow steps 1. to 4. above.

  2. Select Upload Tags under Upload Options on the tree view of the WebSite Properties dialog.

Document Support Files to Upload

These check boxes let you control what happens to the files associated with your webpage (images and so on) when you upload to your server. Usually you will want to publish all linked files. To do this, ensure that every check box has been ticked.

NOTE

  • In Step 3. above, you should be right-clicking over the website name, not any of the files that are included with the website.


Website Publishing Options

Websites - Publishing Options

Introduction

To open the Publishing Properties window,

  1. On the View menu, select the Resource Manager submenu, and then select Websites.

  2. In the Websites Manager resource panel, make sure that the Websites tab is selected.

  3. All websites are displayed with the following website file icon: . Right-click over a website name and select Properties.

  4. Select Publishing on the tree view of the WebSite Properties dialog.

You can perform the following operations with publishing. If you are new to HTML, then don’t worry. All the correct defaults are set already.

Don’t Publish on Upload

With this option selected your webpages are uploaded without being published.

If you wish to publish your website then do not tick this option. You can select the directory to publish to from the Directories / Backups window in the Website Properties dialog. This directory allows you to upload your website locally to your computer or onto an intranet. This can be especially useful if you have added publish fields to your document and would like a local copy of the published website. Doing this also allows you to see what the published documents will look like prior to uploading to your server. To upload to a local directory, you need to select Upload Options on the tree view of the WebSite Properties dialog and tick the Upload to Local Directory check box.

Remove all Carriage Returns

HTML text without carriage returns appears as one long line. It looks terrible, but should you want your webpage source devoid of carriage returns, tick this option.

Convert Extended Characters To HTML Codes

If you have used any extended characters in your web document, ticking this option will automatically translate them into HTML on publishing.

Replace ‘\’ With ‘/’ In File Names

Generally this option should be left checked. It replaces DOS style paths with UNIX style paths.

Tag Case

Selecting an option in this panel automatically changes the case of all HTML tags to the option you select on upload.

File Format: Publish as UNIX, Win or Mac/Amiga Text File

The standard format for HTML files is the UNIX text file. By default, HotDog will translate all files you upload to the correct format, however, if you wish to disable this feature, ensure that it is not checked.

AutoReplace

To open the AutoReplace window:

  1. Follow steps 1. to 4. above.

  2. Select AutoReplace under Publishing on the tree view of the WebSite Properties dialog.

Replace xx With yy

The AutoReplace function allows you to replace certain words or expressions on publishing (such as build notes).

To Add a Replace Term:

  1. Click Add.

  2. In the Add a New Field dialog, enter the expression you want to replace.

  3. In the With window, enter the expression you want to replace with.

To Edit a With Term:

  1. In the Replace window, select the term that you are replacing.

  2. In the With window that appears, change the term that you want to replace with

To Remove a Replace Term:

  1. On the Replace window, click on the replace term you want to remove.

  2. Click Delete.

Replace with File

Tick this option if you want to replace some text with a file. For example, you may wish to change an image filename. You can specify the file by clicking on: .


Upload A Website

Uploading Websites

How To Upload A Website

  1. Open the website you want to upload.

  2. Click [image] to upload the currently opened website.

NOTE

If you have not already defined a server to upload your website to, you will need to do so now. See the Website Wizard for more details.

How to Upload a Single File from a Website

  1. Open the website you want to upload a file from.

  2. Click on a file listed in the Websites panel with the right hand mouse button.

  3. Select Upload Document from the context menu that appears.

How to Upload Multiple Files from a Website

If you want to upload multiple files in your Website, without uploading the entire Web site, then follow these steps:

  1. Open the Website you want to upload a file from.

  2. Open the Internet Files panel.

  3. Ensure that the Websites resource panel and Internet Files panel are on opposite sides of the screen (see Hiding or Displaying Resources for more information on how to do this).

  4. Within the Internet Files panel, connect to the Web server that you wish to upload the files to.

  5. Within the Websites resource panel, hold down the CTRL key and click on each of the files that you wish to upload.

  6. Let go of the CTRL key, and then click on one of the files you have selected, and holding the mouse button down, move the mouse pointer over to the files section of the Internet Files panel. Then let go of the mouse button.

  7. The selected files will be uploaded to the Web server.


Adding Tasks To Websites

Add A New Task To A Website

  1. Open the website you want to edit.

  2. Click [image] to add a task to a document in your website.

For a quick and easy way to assign task to the documents in your website, you can use the Website Browser. Or, for more information about tasks, see the Tasks Overview.


Website-Wide Find-And-Replace

Website-Wide Find-And-Replace (Including BODY and META Tag Editing)

First, open the Website-Wide Find-and-Replace dialog:

  1. Open the website you want to upload.

  2. Click [image] .

Changing all the BODY Tags (i.e. Document Properties) in Your Website In One Go.

  1. Click the Body button. This opens the Document Properties dialog. Use this dialog to make changes to all the documents in your website.

  2. Click OK.

  3. You are now asked to confirm that you want to make the changes to all your documents. Click YES to make the changes to all your documents.

Changing all the META Tags in Your Website in One Go.

  1. Click the Information button. This opens the Document Information dialog. Use this dialog to make changes to all the documents in your Website.

  2. Click OK.

  3. You are now asked to confirm that you want to make the changes to all your documents. Click YES to make changes to all your documents.

Finding and Replacing Text in all the Documents in Your Website.

  1. Click the Text button.

  2. In the WebSite-Wide Replace dialog, enter the text you are replacing into the Text to Find box.

  3. Enter the text you wish to replace with in the Text to Replace box.

  4. Click OK.

  5. You are now asked to confirm that you want to make the changes to all your documents. Click YES to make changes to all your documents.


Tasks - Overview

Introduction.

When many people are working together on one website, the need to coordinate their actions is paramount. A task is a note that is attached to a document in a website. This note typically comprises of some instructions to be given to someone working on the website. A task includes the following information:

  • The Subject of the task. (E.g. Update this webpage.)

  • Who the task is Assigned To and who the task is Assigned By.

  • The date the task was assigned (Begin Date) and a date indicating when the task must be completed (Due Date).

  • The document in your website that is associated with the task (Filename).

  • The Category, Status and Priority of the task.

  • A full description of the task to be completed (Notes).

From the Websites Manager resource panel, you can assign tasks from the Task Manager (click on the Tasks tab) or the Website Browser (click on the Browse tab). The Website Browser lets you look through your Website, assigning tasks to problem pages where necessary.

What Do You Want To Do?

Add New Task to a Website.

Edit a Task’s Associated File.

Delete a Task.

Edit a Task’s Properties.

Filter Tasks.

Use the Integrated Browser to Assign Tasks to Files.


Delete A Task

Deleting Tasks

How To Delete A Task

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Tasks tab.

  3. Right-click on the task associated with the file you want to edit (in the Subject column).

  4. Select Delete.


Edit A Task's Properties

Editing A Task's Properties

Edit the Properties of a Task

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Tasks tab.

  3. Right-click on the task associated with the file you want to edit (in the Subject column).

  4. Select Properties.

For a quick and easy way to assign task to the documents in your website, you can use the Website Browser. Or, for more information about tasks, see the Tasks Overview.


Filtering Tasks

How To Filter Tasks

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Tasks tab.

  3. Using the drop-down list, select the filter you want to apply to your task list.

Description of Filter Types.
Show All | Lists all tasks.
Active Tasks | Lists only currently active tasks.
Due this Week | Lists only tasks due this week.
Overdue Tasks | Lists only overdue tasks.
Future Tasks | Lists all tasks due to begin in the future.
Completed Tasks | Lists all completed tasks.


Websites - Integrated Browser

Using The Integrated Browser To Assign Tasks To Files

The Website Browser provides a quick and easy way to assign task to the documents in your website.

  1. Open the website you want to browse.

  2. In the Websites Manager resource panel, click on the Browse tab.

  3. Click the [image] to display your website’s homepage.

You can navigate through your Website using this browser window, adding tasks to any pages that need work.

To Add a Task To The Webpage Currently Loaded in your Website Browser:

  • Click [image] . In the Task Properties dialog that appears, the document filename will be automatically inserted into the Filename field.


Checking Websites For Errors

Checking Websites For Errors - Overview

Introduction

The Websites Manager’s functionality includes Link Verification and Resource Gathering. Link verification means that all the links to local resources (such as Images and other HTML documents stored on your computer) are automatically tested. All the external links (such as links to other websites) are listed individually. You can tell the checker to verify these links as well. Resource Gathering is a special function of the link checker. When checking the links of your website any resources (Images, HTML documents etc.) that are found outside of the defined document directory are listed, you can automatically import them into your website document directory.

A built-in mechanism is supplied for error-checking all of the webpage links across an entire site. The Error Checker will automatically:

  • Check a website's local links, displaying any broken links that it finds.

  • Check a website's remote links, which can be checked for validity.

  • Allow editing of any broken local or remote links in place and automatically change all references to the link across an entire website.

  • Checking websites for Errors (The Check Tab)

To Start Checking the Links in your Website:

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Websites tab.

  3. Click [image] .

What Do You Want To Do?

Verify an External Link.

Edit a Broken Link.

Refresh the Link List.

Collect External Resources.


Verify An External Link

Verifing External Links

How To Verify An External Link

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Websites tab.

  3. Click [image] .

  4. If there are any external resources or unverified links within your website, you will receive a message prompting you as to whether you wish to view them. Click YES. (Otherwise, you can view them later by clicking on the Checks tab.)

  5. If your network is using a Proxy, you will need to specify the Address and Port to use, so that external links can be verified. To do this, click on [image] and enter the details in their respective fields. Make sure to tick the Use Proxy when Verifying External Links check box.

  6. In the Checks panel of the Websites Manager, right-click on the link you want to verify and select Verify Link.

  7. If you wish to stop checking the link at any time, click [image] .

  8. Any broken links will appear with the following icon: .

Editing Broken Links

To edit any broken links immediately after verifying them:

  1. Right-click on the broken link you want to edit and select Edit Link.

  2. A window will appear with all the webpages in your website that contains the selected link.

  3. In the Replace Resource field, enter the correct link information.

  4. Do one of the following:

  • If you wish to update all the webpages in your website with the corrected link information, select Update in All Pages. Then click Update.

  • If you wish to update only certain webpages in your website with the corrected link information, in the Document window select the webpages that you wish to update. (You need to press the [CTRL] key to select more than one webpage.) Then click Update.

  • If you wish to edit the webpages directly yourself, in the Document window select the webpages that you wish to update. (You need to press the [CTRL] key to select more than one webpage.) Then click Edit Files. All the webpages will then be opened for you edit, with the broken link highlighted where it first appears in each webpage.


Edit Links

Editing Links

How To Edit A Broken Link

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Websites tab.

  3. Click [image] .

  4. If there are any external resources or unverified links within your website, you will receive a message prompting you as to whether you wish to view them. Click YES. (Otherwise, you can view them later by clicking on the Checks tab.)

  5. In the Checks panel of the Websites Manager, right-click on the link you want to edit and select Edit Link.

  6. A window will appear with all the webpages in your website that contains the selected link.

  7. In the Replace Resource field, enter the correct link information.

  8. Do one of the following:

  • If you wish to update all the webpages in your website with the corrected link information, select Update in All Pages. Then click Update.

  • If you wish to update only certain webpages in your website with the corrected link information, in the Document window select the webpages that you wish to update. (You need to press the [CTRL] key to select more than one webpage.) Then click Update.

  • If you wish to edit the webpages directly yourself, in the Document window select the webpages that you wish to update. (You need to press the [CTRL] key to select more than one webpage.) Then click Edit Files. All the webpages will then be opened for you edit, with the broken link highlighted where it first appears in each webpage.


Refreshing the Link List

Refresh The Link List

  1. In the Websites Manager resource panel, click on the Websites tab.

  2. Click [image] .


Collecting External Resources

Collect External Resources

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Websites tab.

  3. Click [image] .

  4. If there are any external resources or unverified links within your website, you will receive a message prompting you as to whether you wish to view them. Click YES. (Otherwise, you can view them later by clicking on the Checks tab.)

  5. Do one of the following:

  • If you wish to collect all the resources then In the Checks panel of the Websites Manager, just click [image] .

  • If you wish to only collect selected resources then right-click on the resource that you wish to collect. Then click [image] .

All selected external resources will then be copied to a Resources directory within your website directory.


Advanced Guide To Websites

Introduction.

HotDog Websites are simply directories on your computer. Everything in these directories (and the directories themselves) gets copied to your server when you upload. This means that the directory structure of your website on your server is exactly the same as the directory structure of your website on your local computer.

What Happens When You Create a Website.

When you first make a Website you define your base directory. The contents of the base directory you define are copied to your website when you upload. This includes any sub-directories. For example, say you have a directory structure on your computer as shown in the following picture:

If you define your base directory as:

C:\Program Files\Sausage\HotDog6\HTMLFiles\websites\art_website

then, when you upload your website, all the contents of the art_website directory are uploaded. The fact that the directory structure is duplicated is important because of the way your files are linked to each other. Each link to another file that you have made (whether it be an image or another HTML document) should be referenced relatively.

For example, assume that all your HTML files are saved in the art_website directory and your images in the art_website\graphics directory. Further, assume that in a HTML document about_me.html you have the following link to an image in your graphics directory:

<IMG SRC="graphics/me.jpg">

When a browser reads this link it looks for the file me.jpg in the graphics directory. The browser assumes that the graphics directory is located under the directory where the current file (about_me.HTML) resides. This is what is meant by relative referencing. By using it, you are forced to maintain identical directory structure on your computer and your server. Using websites makes this easy to accomplish. If you are careful to keep all the files you link to under or in the directory you defined as your Base Directory then, when your website is uploaded, HotDog will automatically create the required directory structure on your server. For more details on relative referencing read the Relative and Absolute Links tutorial.

The Difference Between the Base Directory and the Web Server Directory.

By now, you have probably defined a web server directory using the Internet Site Wizard. This directory is the directory on your FTP site where your server looks for all of your HTML files. This directory is usually called www or public_html. Your base directory is the directory on your hard drive where you store your website. It is these two directories that determine exactly where your website is uploaded.

Using the example above, say Elise has a website defined within the base directory art_website with the following properties:

Web Server Address:

www.woodnet.com

Web Server Directory:

public_html

When Elise uploads her website, everything in the art_website directory is copied to her server at: public_html

Everything in the art_website/graphics directory is copied to her server at: public_html/Graphics

Example 1

Say Peter had the following website defined with the following properties:

Base Directory:

D:\Program Files\Sausage\Websites\Cthulhu Website

Web Server Directory:

www

Peter has the following files in different directories in his Website:

index.HTML | D:\Program Files\Sausage\Websites\Cthulhu Website
bosch.HTML | D:\Program Files\Sausage\Websites\Cthulhu Website\Horror
azathoth.HTML | D:\Program Files\Sausage\Websites\Cthulhu Website\Horror
lovecraft.HTML | D:\Program Files\Sausage\Websites\Cthulhu Website\Horror Writers
waterhouse.HTML | D:\Program Files\Sausage\Websites\Cthulhu Website\Painters
borges.HTML | D:\Program Files\Sausage\Websites\Cthulhu Website\Writers
tmbg.HTML | D:\Program Files\Sausage\Websites\Cthulhu Website\Music\Classic

When Peter uploads his website, in which directory do the files listed above end up on his server?

Answers

Filename | Server Directory
index.HTML | www
bosch.HTML | www/Horror
azathoth.HTML | www/Horror
lovecraft.HTML | www/Horror Writers
waterhouse.HTML | www/Painters
borges.HTML | www/Writers
tmbg.HTML | www/Music/Classic

Example 2

What files and where would the files be uploaded to if Peter changed his base directory to:

Base Directory:

D:\Program Files\Sausage\Websites\Cthulhu Website\Horror

Server Directory:

www

Answers

Filename | Server Directory
bosch.HTML | www
azathoth.HTML | www

Example 3

What about if Peter changed his Base Directory and Server Directory to:

Base Directory:

D:\Program Files\Sausage\Websites

Server Directory:

www

Answers

Filename | Server Directory
index.HTML | www/Cthulhu Website
bosch.HTML | www/Cthulhu Website/Horror
azathoth.HTML | www/Cthulhu Website/Horror
lovecraft.HTML | www/Cthulhu Website/Horror Writers
waterhouse.HTML | www/Cthulhu Website/Painters
borges.HTML | www/Cthulhu Website/Writers
tmbg.HTML | www/Cthulhu Website/Music/Classic

Example 4

What if Peter changed his base directory and server directory as follows:

Base Directory:

D:\Program Files\Sausage\Websites\Cthulhu Website

Server Directory:

www/Cthulhu

Answers

Filename | Server Directory
index.HTML | www/Cthulhu
bosch.HTML | www/Cthulhu/Horror
azathoth.HTML | www/Cthulhu/Horror
lovecraft.HTML | www/Cthulhu/Horror Writers
waterhouse.HTML | www/Cthulhu/Painters
borges.HTML | www/Cthulhu/Writers
tmbg.HTML | www/Cthulhu/Music/Classic


Beginner's Guide To Websites

What are Websites?

A website is a collection of (usually) related documents and media stored on the same server. A website can contain any number of webpages. Maintaining a website that contains many webpages (even hundreds) is very difficult without the correct tools. Fortunately, HotDog comes with the latest arsenal of website maintenance tools.

You have to create all the documents that form part of your website. The first question to ask is where you are going to store them. Some forethought will help immensely as your website grows larger.

For example, say you are creating a website with three themes: About Yourself, Art and Literature. You might have the following webpage files for each theme:

Welcome Page | About Yourself | About Art | About Literature
index.HTML | About_Me.HTML | AirBrush_Art.HTML | Borges.HTML
 | My_Job.HTML | Oils.HTML | Lovecraft.HTML
 | My_Interests.HTML | WaterColors.HTML | Cervantes.HTML

A recommended directory structure you could use on your server is shown below:

Here is where your files are stored:

Directory | Filename |
root* root/me root/me root/me root/art root/art root/art root/lit root/lit root/lit | index.HTML About_Me.HTML My_Job.HTML My_Interests.HTML AirBrush_Art.HTML Oils.HTML WaterColors.HTML Borges.HTML Lovecraft.HTML Cervantes.HTML | What is the ‘root’ directory? All HTML files on a server, if they are to be seen by others on the Internet, must be stored in or under a special directory. This directory is usually named www or public_html. However, it can have any name and your ISP will have to tell you what it is. In the example shown left , this special directory is called root.

The advantages of the above directory structure are:

  • Organization.

You can pretty much guess immediately which file will be stored in what directory. Imagine if your website had over 2000 files, stored all over the place.

  • Expandability.

If you ever wanted to add more themes, or expand upon a current one, it is easy for you to do so.

Mirroring Your website

A key element to website maintenance is having two complete copies of your website. The server copy is what people view on the Internet. Use the local copy of your website (i.e., the copy of your website actually on your hard drive) to make to modifications and improvements. This technique of having two copies of your website is known as mirroring. It is important to duplicate the directory structure of the server as well. For example, the directory structure of your local copy of the website could look as follows:

C:\Program Files\Sausage\HotDog6\HTMLFiles\index.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\me\About_Me.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\me\My_Job.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\me\My_Interests.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\art\AirBrush_Art.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\art\Oils.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\art\WaterColors.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\lit\Borges.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\lit\Lovecraft.HTML

C:\Program Files\Sausage\HotDog6\HTMLFiles\lit\Cervantes.HTML

In this case, you would define the Base Directory of your HotDog website as:

C:\Program Files\Sausage\HotDog6\HTMLFiles\

(Base Directories are discussed below)

Keeping two copies of your website (one on your local machine and the other on the server) lets you think of website-wide operations instead of just document operations. This is very important when you are dealing with many documents.

For example, say you have changed five webpages in the local copy of your website, and you want to upload these updated files. If you don’t have a local copy of your website then you will have to remember the name of each and every file you need to upload, as well as the precise directory to which they should be uploaded. However, if you have a complete local copy of your website then, to upload your changes, all you need do is tell HotDog to only upload documents that have been changed. HotDog then takes care of all the details.

Having a complete local copy of your website gives you other advantages as well. For example, you can perform website-wide find-and-replaces; apply changes to the body tag of all HTML pages in your website and more.

What is the Base Directory?

To create a HotDog website you have to tell HotDog where the local copy of your website is to be found. In the example above, your website is stored in the C:\Program Files\Sausage\HotDog6\HTMLFiles\ directory. That is, all the files that form part of your website are inside, or in directories that are under, the HTMLFiles directory.

See Also:

Websites Manager Resource Panel (Where all website functionality is stored).

Advanced Websites Tutorial.


Absolute And Relative References

Introduction.

This topic discusses the advantages and disadvantages of relative and absolute referencing (or linking) and also explains the different HTML syntax behind each method.

How to Insert Media into your Webpage

There are two ways of including media (i.e. pictures, sound, etc.) into documents. Some documents, like MS WORD documents, actually store the media inside the document whereas others (such as HTML documents) just point to external media files.

There are advantages and disadvantages of both methods and they will be discussed later. This tutorial will explain how HTML files point to their associated media files (or even other HTML files) and the different methods you can use to point to these files.

Advantages and Disadvantages of Storing Files Externally to a Document

Advantages

  1. Different documents can access the same media files. This saves disk space (and download times).

  2. If you change a document, you only have to ship the changed text file (and not all the related media files). If the files are stored inside the document, the whole document has to be re-shipped.

Disadvantages

  • You don't always know what files are associated with your document. Whereas with WORD, if you copy a document to a floppy, you can be sure that you have also copied any pictures in your document to the disk as well. If you copy a HTML document to a floppy, you have to be careful to include any related media files.

How Files are Referenced in HTML

Basically, you need to tell the browser where the media files for the HTML documents are stored. HotDog will do this automatically for you. For example, if you insert a picture called elise.gif into your webpage, this file must be referenced in some way within the webpage because the image is stored externally.

There are 2 different ways of referencing external files from a HTML file: absolutely and relatively.

Absolute References

Here is an example of the HTML code for inserting an image using an absolute reference:

<img src= "file:///C|/Program Files/HotDog6/HTMLfiles/graphics/elise.gif">

The HTML code above can be thought of as:

<image source = location> where the location is the absolute position of your file (written in a UNIX format).

The location, file:///C|/Program Files/HotDog6/HTMLfiles/graphics/elise.gif, when broken down and translated reveals file:// is just like http://. It just tells the browser to read a file on the local computer and not start browsing the Internet.

/C|/Program Files/HotDog 6/HTML files/graphics/elise.gif

is the UNIX translation for:

C:\Program Files\HotDog 6\HTML files\graphics\elise.gif

This is just the specific location of the picture.

As you can see, the image's position is located on your local hard drive (your own computer). This means, if you preview your HTML file anywhere on your computer, the image will be found. The only problem is that when you upload your HTML file to your server, the directory path C:/Program Files/HotDog6/HTML files/graphics/elise.gif will not exist and so the image will not be displayed.

Relative References

In order to solve the problem above, relative referencing is used.

Here is an example of the HTML code for inserting an image using a relative reference.

<img src="graphics/elise.gif">

You can think of this relative reference in a HTML file as a command: "Insert the picture elise.gif, which is in a directory called graphics, below the current directory."

In this case, when loading your HTML file, the browser will look for your images in a directory below your current directory called graphics. This means that your images will be displayed when you upload your files to the server, provided you store all your images in a directory under your HTML file called graphics. You can store all images and graphics in the same directory, but this will get messy if you create a large website.

NOTE

You will notice that the direction of the slashes is different in Windows95 and UNIX. You can configure HotDog to take care of this automatically when you upload your files to the Net:

  1. In the Edit menu, select Preferences.

  2. In your Hotdog menu go to

  3. Select Publishing on the tree view of the WebSite Preferences dialog.

  4. Tick the Replace '\' with '/' in filenames checkbox.

Tricks

The whole process of referencing files correctly is simple if you mirror the directory structures. If you are uploading a Website, HotDog does this automatically for you.

For instance, if your directory structure on your local hard drive is as shown in the following image:

The current directory is called HTMLFiles. The directory HTMLFiles has child directories called audio, graphics, other and a parent directory called HotDog6. If you store all your HTML files in the HTMLFiles directory and all your media in the associated media directories then, when you upload all your work, the referencing will still be correct. This is provided the same directory structure exists on your server.

Say the directory structure of your server is:

The children directories of www are exactly the same as the directory structure on your local hard drive. This is what is meant by the term mirroring. In this case, your HTML directory structure is mirrored. To demonstrate this, below are correctly referenced images. In each case the image elise.gif is stored in the graphics sub-directory of the HTML directory. On the local computer, the HTML file is stored in the HTMLFiles directory on the server. The HTML file is stored in the www directory.

The correct HTML code to insert the picture elise.gif on the local computer is:

<img src="graphics/elise.gif">

The correct HTML code to insert the picture elise.gif on the server is:

<img src="graphics/elise.gif">

The references are the same because we designed the directory structure to be that way. Of course it doesn’t matter what the parent directory is above your HTML directory, this is the key advantage of relative addressing over absolute addressing.

TIP

  • Whenever you create a new document, save it immediately into the default HTML Document Directory. This ensures that HotDog can use relative references because it knows the position of your HTML file.

Examples

Using the picture to the left as your directory structure, answer the following questions:

Q1. What is the parent directory of graphics?

Q2. What are the children directories of HotDog6?

Q3. If I create a link to a file called giants.wav in the audio directory from a HTML file in the HTMLFiles directory, what would the path be?

Q4. If I create a link to the file elise.gif in the graphics directory from an HTML file in the HotDog6 directory, what would the path be?

Q5. If I create a link to the file peter.txt in the Textfiles directory from a HTML file in the HTMLFiles directory, what would the path be? (Note, use ... to mean go up one directory.)

Answers:

Q1. HTMLFiles.

Q2. downloads, HTMLfiles, text files.

Q3. "audio/giants.wav".

Q4. "HTMLfiles/graphics/elise.gif".

Q5. "../text files/peter.txt".


Macro Editor

Introduction

The Macro Editor is used to easily insert commonly used tags and text into your documents. For example, a simple table may form part of your logo. Just make this table a macro, and then you need only double-click on the macro, to insert your table. Macros can also be added to your toolbars, for ease of use.

A key advantage of using macros is that you can specify text to be inserted before and after selected text in the document. Perhaps you just have a common font effect you want at your fingertips. Using the Macro Editor, you can build your own tags. Furthermore, you can have these tags automatically wrap around highlighted text when you insert them.

What Do You Want Help On?

Opening the Macro Editor.

Creating Macros.

Using a Macro.

Deleting Macros.

Editing Macros.

Adding Macros to a Toolbar.


Opening the Macro Editor

Step-by-Step By Instructions

  1. On the View menu, select the submenu Resource Manager.

  2. In the Resource Manager submenu, click on Macro Editor.


Creating a Macro

Step-by-Step Instructions

To Create a Macro

  1. First, you need to have the Macro Editor open. To do this, on the View menu, select Resource Manager. Then on the Resource Manager submenu, select Macro Editor.

  2. In the Macro Editor resource panel that appears, click on the Add New Macro button.

  3. Give your macro an easy name to remember.

  4. Enter the text that you want to appear before any selected text in the Text to enter before selected text field.

  5. Enter the text that you want to appear after any selected text in the Text to enter after selected text field.

  6. Click OK to save your macro.

Macro Shortcuts

You can create a keyboard shortcut for your macro, using the fields at the bottom of the Macro Editor resource panel. You just need to decide on a keyboard combination to activate your macro.

  1. Open the Macro Editor Resource Panel.

  2. Select the tag for which you want to add a shortcut.

  3. At the bottom of the Macro Editor resource panel, tick any of the checkboxes for the ALT, CTRL and SHIFT keys that you wish to use in your shortcut.

  4. Use the Shortcut Key field to enter an alphanumeric key to the tag.

  5. Click OK to save the changes.

For example, if you wanted to use ALT + SHIFT + K to activate your macro:

  1. Check the ALT box.

  2. Check the SHIFT box.

  3. Enter K into the letterbox.

  4. Click OK.

Editing Macro Shortcuts

To edit a shortcut on your Macro Shortcut list:

  1. Open the HTML Tags Resource Panel.

  2. Select the tag you want to edit.

  3. At the bottom of the HTML Tag resource panel, change any of the ticks you have entered in the checkboxes for the ALT, CTRL and SHIFT keys.

  4. Use the Shortcut Key field to change the alphanumeric key used for the shortcut.

  5. Click OK to save the changes.


Using a Macro

Step-by-Step By Instructions

  1. First, you need to have the Macro Editor open. To do this, on the View menu, select Resource Manager. Then on the Resource Manager submenu, select Macro Editor.

  2. Double-click on the [image] icon.

  3. The list that appears shows all the macros you have created. To insert a Macro into your document do one of the following:

  • Double-click on the Macro,

  • Highlight some text, then double click on the Macro you want to insert.


Deleting a Macro

Step-by-Step By Instructions

To delete a macro from your macro list:

  1. First, you need to have the Macro Editor open. To do this, on the View menu, select Resource Manager. Then on the Resource Manager submenu, select Macro Editor.

  2. Double-click on the [image] icon.

  3. The list that appears shows all the macros you have created. Right-click over the macro you want to delete and select Delete Macro.


Editing Macros

Step-by-Step By Instructions

To edit a macro on your macro list:

  1. First, you need to have the Macro Editor open. To do this, on the View menu, select Resource Manager. Then on the Resource Manager submenu, select Macro Editor.

  2. Double-click on the [image] icon.

  3. The list that appears shows all the macros you have created. Right-click over the macro you want to edit and select Properties.

  4. Make the changes that you wish and click OK to save them.


HTML Tags

Introduction

HotDog Pro comes with a complete listing of all HTML tags we could find - plus a few more. The HTML Tags resource panel is used to define different colors for different tags and to create shortcut keys for different tags. This resource panel gives you an easy way to insert HTML tags into your web documents. However, the HTML Tags resource panel also comes with some powerful features. For example, different browsers support different tags. The HTML Tags resource panel can color tags that are browser dependent a different color to your standard tags. This means you can easily spot tags that may cause trouble for visitors to your site. Furthermore, you can define your own tags and give them their own color! Each HTML tag can be assigned its own shortcut key. This way you can significantly speed up the editing process.

What Do You Want To Do?

Start the HTML Tags Resource Panel.

Limit Syntax Checking to Particular HTML Specifications.

Color Tags.

Create a Shortcut Key for a Tag.

Tag Properties.


Opening the HTML Tags Resource Panel

Step-by-Step Directions.

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select HTML Tags.


Creating Shortcuts for Tags

How to View a List of all Shortcuts

  1. Open the HTML Tags Resource Panel.

  2. Right-click on the HTML Tags resource panel and select Shortcuts.

Creating Your Own Shortcuts

You can create a keyboard shortcut for your HTML tags using the fields at the bottom of the HTML Tags resource panel. You just need to decide on a keyboard combination to activate your macro.

  1. Open the HTML Tags Resource Panel.

  2. Select the tag for which you want to add a shortcut.

  3. At the bottom of the HTML Tag resource panel, tick any of the checkboxes for the ALT, CTRL and SHIFT keys that you wish to use in your shortcut.

  4. Use the Shortcut Key field to enter an alphanumeric key to the tag.

  5. Click OK to save the changes.

For example, if you wanted to use ALT + SHIFT + K to activate your HTML Tag:

  1. Check the ALT box.

  2. Check the SHIFT box.

  3. Enter K into the letterbox.

  4. Click OK.

Editing HTML Tag Shortcuts

To edit a shortcut on your HTML Tags Shortcut list:

  1. Open the HTML Tags Resource Panel.

  2. Select the tag you want to edit.

  3. At the bottom of the HTML Tag resource panel, change any of the ticks you have entered in the checkboxes for the ALT, CTRL and SHIFT keys.

  4. Use the Shortcut Key field to change the alphanumeric key used for the shortcut.

  5. Click OK to save the changes.


HTML Tag Properties

Introduction

The Tag Properties dialog gives you the following information:

  • What attributes can be used with the tag.

  • What browsers support the different attributes of the tag.

  • Whether a closing tag is required.

  • A brief description of the tag.

How to Check the Properties of a Tag

  1. Open the HTML Tags Resource Panel.

  2. Select a tag.

  3. Do one of the following:

  • Right-click and select Properties.

  • Click [image] .


Filtering HTML Tags

Introduction

HotDog uses several syntax files to validate any HTML you create. These syntax files are separated by HTML versions and browser support. For example, if you want to use only tags that are HTML version 3.2 compliant, you can specify that only allow HTML 3.2 tags are considered valid. This means that any tags or attributes that don't form part of this specification will be underlined.

Define Syntax Specifications to use on your Document.

  1. In the Edit menu, choose Preferences and then navigate to Syntax Filters.

  2. Using the Language drop-down list select HTML.

  3. Using the Filter Rule drop-down list select the syntax specification you wish to use.

  4. Click OK.


SuperToolz

Menu and Resource Panel

The development of SuperToolz is what makes HotDog Pro so flexible. SuperToolz are plug-in programs that you can use to work in conjunction with HotDog Pro. SuperToolz allow for an unlimited extension of HotDog's functionality, while at the same time giving users the ability to pick and choose the functionality they want to include in HotDog Pro.

You can either add your own programs to use with HotDog Pro (just select Create SuperToolz... in the menu) or you can use one of the fantastic SuperToolz created By Sausage.

Sausage Software provides 24 supertoolz; 4 are freely available to all customers, 6 are third party SuperToolz (that is, they are developed and supported by other companies) and 14 regular Sausage SuperToolz. Seventeen of our supertoolz are included in our great Supertoolz Value Pack. For your convenience, every Sausage SuperTool can be downloaded, purchased (if not free), maintained and updated via the Internet from within HotDog Pro.

Simply by selecting Download SuperToolz... in the menu, HotDog Pro will take you to our Autodownloader so that you can download and install your chosen SuperToolz or SuperToolz updates, ready to use immediately and with no fuss. The AutoDownloader helps you keep in contact with Sausage Software and lets us give you the latest updates on the software we make. As well as plug-in programs, HotDog can even upgrade itself (if the upgrade has been released) using the SuperTool architecture. This includes shell upgrades and HTML syntax files. Even the AutoDownloader itself can be upgraded. When you start the AutoDownloader, your default Internet Browser is started, loading the Autdownloader webpage.

The Sausage SuperToolz include website design utilities, image manipulation tools, animation/special effects, video/audio tools, website enhancement tools, download utilities and search engine tools.

The Sausage SuperToolz section further below provides brief information about each SuperTool. Alternatively, you can find more information about each SuperTool by pointing your browser to:

http://www.sausagetools.com/supertoolz/

and selecting the specific SuperTool you're interested in for further information. With regards to specific help, you can usually press F1 or find a help button within the program to provide specific information.

For quick access to your Supertoolz, the Supertoolz resource panel is useful. Providing the same functions as the SuperToolz menu, you can just double-click on any of the Supertoolz icons to activate them. Remember, you will need to first install some Supertoolz.

To Open the SuperToolz Resource Panel:

  1. In the View menu, select Resource Manager.

  2. In the Resource Manager submenu, select SuperToolz.

What Do You Want To Do?

Start the AutoDownloader.

Run a SuperTool already Installed on your Computer.

Sausage SuperToolz

Free Sausage SuperToolz Include:

  1. LookSmart Smartlinks SuperTool: Provides your website with the power of Looksmart, the largest Internet directory on the planet, in only minutes.

  2. Reptile: A cool application that lets you create funky backgrounds and easily produce any combination of textures and backgrounds.

  3. The SilverThingy: A cool little desktop organizer that consolidates all your frequently used applications into a single dedicated web development environment.

  4. SMIL Composer: Allows you to easily create synchronized multimedia content for RealSystem G2

Other Currently Available SuperToolz:

  1. Channel Wizard: Creates and configures "add channel" buttons for browsers, and creates the link to the content that will be pushed to them.

  2. ICQ Communication Panel Wizard: Insert ICQ Communications Panels into your webpage easily.

  3. ImageLab: A handy and quick image manipulation tool. If you have a clip art collection it is the perfect tool for manipulating your images and optimizing them for your website.

  4. Image Mapper: A tool to create client-side image maps for your webpages.

  5. JackHammer: Get access to busy Web and FTP servers.

  6. JavaScript Tools: Used to add JavaScript to your HTML documents. Includes drop-down lists, clocks, timers, animated buttons, search utility and popup window scripts.

  7. Multi File Find and Replace: Lets you find and replace text through multiple documents.

  8. Real Audio/Video Content Wizard: Convert WAV files to RealAudio files, convert AVIs to RealVideo, create RealMedia metafiles and insert RealPlayer plug-ins into your webpages.

  9. SafeSurf Web Content Rating Wizard: Rate the content of your webpage using the SafeSurf Rating Standard.

  10. Table Editor: This powerful table editor helps you creates complex tables easily.

  11. Web Downloader: Download websites to your local hard drive.

  12. Java Text Effects SuperTool: Allows you to create crazy Java-based text effects in your webpages.

  13. Java Animator SuperTool: A tool that lets you create and insert Java animations (moving graphics) into your webpages.

Third Party SuperToolz:

  1. 1st Java Navigator 5.0: Works just like a customizable File Manager and Filofax for a website or intranet.

  2. Balitools: Create Java applets without learning Java! Great for interactive forms and surveys.

  3. Gif Movie Gear: Great professional tool for animating GIF images.

  4. Intel® Indeo® Media Kit: Create and view high-quality video content, even with a slow connection.

  5. Intel® Web Design Effects: Create dynamic, realistic, bandwidth friendly animated effects.

  6. Xara 3D: An award winning 3D text generation tool that allows you to generate amazing titles within minutes.


Creating a New SuperTool

Introduction

You can add your own Supertoolz to the SuperToolz Resource Manager.

Creating New SuperToolz

  1. On the SuperToolz menu, select Create SuperToolz.

  2. In the Create SuperToolz window, add a description of the supertool you are going to add into the Description field.

  3. Click [image] to select the program you want to add as a supertool. (The working directory information is entered automatically.)

Now when you open the SuperToolz Resource Manager your program will appear as a shortcut.


Start the AutoDownloader

Step-By-Step Instructions

Do one of the following:

  • In the SuperToolz menu, select Download SuperToolz.

- OR -

  1. Open the SuperToolz Resource Panel.

  2. Click on the Download SuperToolz button.

NOTE

The URL to the AutoDownloader is:

http://autodownload.sausage.com/

The URL to the Sausage Software’s Website is:

http://www.sausagetools.com/

Our SuperToolz can be found by pointing your browser to:

http://www.sausagetools.com/supertoolz/


Running a SuperTool

Step-By-Step Instructions

Do one of the following:

  • In the SuperToolz menu, select the SuperTool you wish to run.

- OR -

  1. Open the SuperToolz Resource Panel.

  2. Double-click on the shortcut for the SuperTool you want to run.


Extended Character Resource Panel

Introduction

Not all the symbols you want to use in HTML are represented. For example, how do you insert a > or < without it representing the beginning or ending of a tag? What about unusual characters such as ™ or © ?

HotDog gives you a solution with the Extended Character Resource Panel. Simply double-click on the character you want to insert and it’s inserted into HotDog. Easy.

Furthermore, you can insert extended characters into your document as is, to make your document more readable. Then, when you go to upload your document, you can convert all the characters to HTML at the same time.

What Do You Want To Do?

Display the Extended Character Manager.

Insert an Extended Character into a Your Document.

Extended Character Options.

Defining and Editing Extended Characters.


Open the Extended Character Manager

Step-By-Step Instructions

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select Extended Characters.


Insert an Extended Character Into A Document

Step-By-Step Instructions

  1. First open the Extended Characters Resource Panel. On the View menu, select the Resource Manager submenu. In the Resource Manager submenu, select Extended Characters.

  2. On the Extended Characters Resource Panel, double-click on the character you want to insert into your document.


Extended Character Options

Step-By-Step Instructions

To convert all extended characters into HTML code, do one of the following:

  • Press <SHIFT> + <CTRL> + <X>

  • On the Format menu, select Convert and then select Convert Extended Characters.


Defining and Editing Extended Characters

Introduction

While we have tried to find every extended character recognized by browsers, some may have slipped through - or you may want to define your own extended characters.

Defining an Extended Character

  1. On the View menu, select the Resource Manager submenu and then select Extended Characters.

  2. Click [image] to open the Edit Extended Character dialog.

  3. Copy the extended character you want to define and paste it into the Extended Character field.

  4. Enter the HTML code used to represent the extended character into the HTML Code field.

  5. Enter a description of the extended character into the Description field.

  6. Click OK to save your new extended character.

If you wish to edit a particular extended character already in the list of extended characters, select the character you wish to edit then just follow Steps 2. to 6. as above.


Bookmarks/Favorites Resource Panel

Introduction

HotDog Pro automatically tries to find your Netscape Bookmarks and Internet Explorer Favorites. The Bookmarks/Favorites resource panel allows you to view these so that if you should wish to insert one of your favorite websites as a link to your webpage, you can do so simply by clicking on it from within the resource panel. You can also change which links HotDog Pro displays by clicking the drop-down list at the top of the resource panel and selecting the link types you want.

Opening the Bookmarks/Favorites Resource Panel.

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select Bookmarks / Favorites.


Format Functions

Menu and Toolbar

The ability to format your documents is pivotal to website optimization. The Format functions within HotDog Pro have been designed so that you can optimize your webpages both creatively and productively. They include:

  • selecting your own color palette and customizing colors;

  • quick insertion of color code specification into your webpage;

  • formatting document properties - including selecting a style sheet, changing the colors of the text and links, adding a background color or background image and determining the size of your document (including images) and how long it would take to download under different modem speeds;

  • formatting document information - including specifying meta tags, keyword properties, author/description information, document distribution and redirection;

  • using DHTML to dynamically animate objects on your webpage;

  • character and paragraph formatting;

  • converting absolute addresses to relative addresses (and vice versa) simply by selecting the URL you wish to convert;

  • removing carriage returns and stripping tags within documents;

  • file format, extended character, letter casing, table and list conversions;

  • replacing backslashes with forward slashes in your code - that is, replacing \ with /;

  • calculating image dimensions;

  • publishing.


Document Properties

Introduction

The Document Properties dialog controls the appearance of your document. You can select a style sheet, change the colors of the text and links, and add a background color and image. Using the Document Properties dialog you can also see how large your document is (including images) and how long it would take to download under different modem speeds.

What Do You Want To Do?

Open the Document Properties Dialog.

Change the Color of a Document.

Add a Background Graphic to a Document.

Viewing the Document Size.

Save/Load a Color Scheme.


Open the Document Properties Dialog

Step-By-Step Directions

  • On the Format menu click “Document Properties”.


Change the Color of a Webpage

Step-By-Step Directions

First open the Document Properties dialog:

On the Format menu click “Document Properties”.

In the Document Properties dialog click a Color Picker [image] to select a color.

As you change the color of the different link types and text, your changes will be previewed in the preview window of the Document Properties dialog.

Description of the Link Types.

Background Color

The background color of your document. If you are using background graphics, make sure to pick a background color as well because it can take a while for the graphic to load.

Document Text

Unless you specify otherwise with the <FONT> tag, the text of the document will be displayed in this color.

Standard Link

An unclicked link will be displayed this color.

Active Link

A link that is being clicked will be displayed this color.

Visited Link

A link that has been visited will be displayed this color.


Add a Background Image to a Webpage

Step-By-Step Directions

First open the Document Properties dialog:

  1. On the Format menu click “Document Properties”.

  2. In the Background Properties Box click the [image] button.

  3. Using the “File Picker” choose a file to be used as your background image.

  4. Click OK.


Determine the Document Size

Step-By-Step Directions

First open the Document Properties dialog:

  1. On the Format menu click “Document Properties”.

  2. In the Document Properties dialog click the “Document Size” tab.

  3. By selecting different Visitor Connection Speeds you can get an estimate of how long your webpage will take to download (i.e. loaded into the visitors browser).


Save or Load a Color Scheme

Step-By-Step Directions

First open the Document Properties dialog:

  • On the Format menu click “Document Properties”.

Saving Schemes

  1. After selecting different Text/Link colors and background graphics, click the "Save As" button.

  2. Enter a name for the scheme.

  3. Click “OK”.

Loading Schemes

  • Click on the Schemes drop down list box and select the scheme you want applied to your document.


Document Information

Introduction

For many users, Internet search engines provide a gateway to the World Wide Web. But how do search engines find and categorize a Web page?

The answer lies in document Meta tags, which are contained in a document's HTML code. For example, the keywords Meta tag can contain subject keywords related to your Web page. These keywords are used by some search engines as a way of cataloguing your Web page - so if you want to be found on the Internet, be sure to include comprehensive keywords and document information in the Meta tags of your page.

In addition to assisting search engines to index a page, Meta tags also allow a page to perform tricks such as automatically loading a second page after a set period of time (redirection).

HotDog helps you to insert Meta tag information into your Web pages through the Document Information dialog.

What Do You Want Help On?

Opening the Document Information dialog.

Document Title and Base URL.

Document Author and Description.

Document Keywords.

Document Distribution.

Document Redirection.


Opening the Document Information Dialog

Step-by-Step Instructions

  • On the Format menu, select Document Information.


Document Title and Base URL

Document Title

The Document Title of your Web page is used by many search engines as a way of indexing your Web page. The document title also appears at the top of a visitor's browser when they visit your page. A trick to make the most out of the document title is to make it long. For example:

“Peter’s Bookshop - sellers of old, rare, antique books. Based in Melbourne Australia.”

All the crucial information about the webpage is located near the start of the title, the remaining information just contains additional keywords.

Base URL

If you are using long relative links, the Base URL can be useful. For example, say you have a simple document that only links to 20 or so images. All the images are located in the same directory. For example:

<IMG SRC="media/images/pic1.jpg">

Rather than typing “media/images/” in front of every image, you could change the Base URL to “media/images/”. Then all your image references become:

<IMG SRC="pic1.jpg">

However, if you did change the BASE URL as above, then to link your Web page to another document in the same directory would require a relative link jumping up two directories:

<A HREF="../../doc2.HTML">

See Absolute and Relative References for more information.

To Edit Your Document's Title and Base URL:

  1. On the Format menu, select Document Information.

  2. Click on the Title tab.

  3. Enter the Document Title and/or Base URL into the boxes provided.

  4. From the drop-down list at the bottom of the screen, select the option Blank boxes delete related document fields if you want any unfilled fields on the screen to indicate that those fields should be deleted from the document's Meta tag information (for example, if you left the Document Title field empty, then selecting the Blank boxes delete related document fields option would erase any existing title in your page's Meta tags). Otherwise, make sure that the Blank boxes make no change to related document fields option is selected.

  5. Click on the OK button to apply changes to your document.


Document Author and Description

Step-by-Step Instructions

The Author and Description of your webpage are used by some search engines to catalog the page. It is worth your while to provide a meaningful description for these fields.

To edit your document's Author and Description fields:

  1. On the Format menu, select Document Information.

  2. Click on the Author & Description tab.

  3. Enter the Author and Description of your webpage into the boxes provided.

  4. From the drop-down list at the bottom of the screen, select the option Blank boxes delete related document fields if you want any unfilled fields on the screen to indicate that those fields should be deleted from the document's Meta tag information (for example, if you left the Author field empty, then selecting the Blank boxes delete related document fields option would erase any existing author information in your page's Meta tags). Otherwise, make sure that the Blank boxes make no change to related document fields option is selected.

  5. Click on the OK button to apply changes to your document.


Document Keywords

Introduction

Most search engines use a Web page's keyword list to index the page. Frequently many of the Web pages that you create will have the same keyword list, so HotDog lets you save keyword lists as a keyword file.

To Add Keywords to a Web page

  1. On the Format menu, select Document Information.

  2. Click on the Keywords tab.

  3. Enter the keyword(s) for your Web page into the box provided.

  4. From the drop-down list at the bottom of the screen, select the option Blank boxes delete related document fields if you want any unfilled fields on the screen to indicate that those fields should be deleted from the document's Meta tag information (for example, if you left the Keywords field empty, then selecting the Blank boxes delete related document fields option would erase any existing keywords in your page's Meta tags). Otherwise, make sure that the Blank boxes make no change to related document fields option is selected.

  5. Click on the OK button to apply changes to your document.

To Save Your Keywords to a Keyword File

  1. Enter your keywords into the Keywords box.

  2. Click on the Save Keywords File button.

  3. Enter a name for your keyword file into the Save As dialog.

  4. Click on the Save button.

To Load a Keywords File

  1. Click on the Load Keywords File button.

  2. Use the File Selector to select the keywords file that you want to load.

  3. Click on the Open button.


Document Distribution

Introduction

The Distribution method you choose effects the way that some search engines index your Web page. For example, there are some Web pages you may not want indexed by search engines - such as those that are inside frames. Setting the distribution method in these pages to Local will stop them from being indexed by search engines.

To Set the Distribution of a Web page:

  1. On the Format menu, select Document Information.

  2. Click on the Distribution tab.

  3. Choose the Distribution method you want to use from the drop-down list.

  4. Click on the OK button to apply changes to your document.

HTTP-EQUIV

Meta-information can be used to pass extra information to browsers. For example:

<META http-equiv="Version_Number" CONTENT="2.02">

<META http-equiv="Style" CONTENT="Modern">

<META name="Completed" CONTENT="Yes">

If a browser requests the Header information of this document, all the http-equiv results are returned, whilst the name values are not. For example, a HTTP response to a GET or HEAD request for the document above would be:

Version_Number:2.02

Style:Modern

Along with all the other information in the header such as date and time.

Names such as Date, Server and Last-modified are names that should not be used as they are typically generated by the server independently.

To Use Name Instead of HTTP-Equiv in Meta Tags:

  1. On the Format menu, select Document Information.

  2. Click on the Distribution tab.

  3. Click on the Use Name instead of HTTP-EQUIV check box to place a tick in the box.

  4. Click on the OK button to apply changes to your document.


Document Redirection

Introduction

You can automatically redirect a Web page's visitors to another Web page using this option. For example, if you have recently changed a HTML file name, and a search engine links to the old file name, then you might make the old file a simple redirection page, which after a few seconds automatically takes the visitor to the new page.

To Redirect a Web page

  1. On the Format menu, select Document Information.

  2. Click on the Redirection tab.

  3. Click on the Enable Document Redirection check box to place a tick-mark in the box.

  4. Enter the redirection URL and the time to wait before redirecting.

  5. From the drop-down list at the bottom of the screen, select the option Blank boxes delete related document fields if you want any unfilled fields on the screen to indicate that those fields should be deleted from the document's Meta tag information (for example, if you left the New URL field empty, then selecting the Blank boxes delete related document fields option would erase any existing redirection URL in your page's Meta tags). Otherwise, make sure that the Blank boxes make no change to related document fields option is selected.

  6. Click on the OK button to apply these redirection preferences to the current document.

To Remove Redirection

  1. On the Format menu, select Document Information.

  2. Click on the Redirection tab.

  3. Click on the Enable Document Redirection check box to remove the tick-mark from the box.

  4. Click on the OK button to remove redirection from the current document.


How To Change the Style of a Paragraph

Step-By-Step Directions

  1. Highlight the paragraph you want to edit.

  2. From the Format menu, select Paragraph.

  3. In the Format Paragraph dialog, navigate to the styles category you want to edit.

What Do You Want To Do?

Change the Style of a Paragraph (H1, H2 etc).

Change the Alignment of a Paragraph.

Change the way Text Flows Around a Paragraph.

Working with Paragraphs - Overview.

NOTES

  • Occasionally you may wish to change a paragraph style that you have already defined for a set of tags. Instead of selecting all the blocks of text within the tags that you wish to format, just select the entire opening tag. For example, if your paragraph is within H1 tags then you would select everything within:

<H1 STYLE=" ......">

Then just go to the Format menu and select Paragraph as usual.

  • If you select multiple paragraph tags for editing, only those attributes all paragraphs have in common will be displayed in the Format Paragraph dialog.

  • A full discussion of the relative advantages and disadvantages of using HTML or inline styles for formatting is provided here.


DHTML Animation

Introduction

Dynamic HTML (DHTML) is a newer and more powerful extension of HTML. Supported by only the latest browsers (Netscape 4 and Microsoft Internet Explorer 4 or better). DHTML lets you add moving objects to your webpage. In this case, an object (or entity) can be some text, an image or even a table.

Inserting Dynamic HTML effects into your document is easy:

  1. Highlight the object you want to insert.

  2. On the Format menu, click on Dynamic HTML Animation.

  3. Select the animation effect.

NOTE

ROVER (unless you use MS Internet Explorer 4) will not display your animations. You will have to preview them with an external browser.


Forms, Discussion

Introduction.

Each form element you use has a name. When the visitor submits a form, you are e-mailed the name of the form element along with the visitor’s input into that form element.

For example, assume you have used a text element with the name namebox. If a visitor to your webpage enters J. Dee into that text box and then submits the form, you would be e-mailed the following text:

&namebox=J.+Dee

The above output is generated by this HTML code:

<INPUT TYPE="text" NAME="namebox" VALUE="Enter your name here" >

There are two things to notice here. One is that the visitor’s reply is prefaced by the name of the text box that was used. This highlights the importance of giving all form elements meaningful names. The second is that the form is not very readable. Strange characters have been inserted into the text. These characters are the result of the format that browsers use to submit the details of the form. If you want to format the data into a more readable form you need to use CGI.

NOTE

Many newer browsers no longer support this feature. Read on to see how you can still receive data from forms.

What is CGI?

CGI (Common Gateway Interface) is a computer language, commonly PERL, that reads and reacts to a visitor’s form submission. The CGI program must be stored on a server. Usually this is the server where you store your HTML files. If you want to use more powerful aspects of HTML, such as setting up a searchable database on a server, you will need access to the server and a lot of programming experience that is beyond the scope of this help. Furthermore, most ISPs are reluctant to let you place your own CGI programs on their server as CGI programs can be security risks.

However, all is not lost. Most ISPs already have some CGI programs on their server for you to use and one of these scripts is usually designed to clean up the output of form-submitted data, make it more readable and then e-mail it to you. To use this resource you will have to e-mail your ISP to get the particulars. However, the HTML code will look similar to the code below:

Instead of submitting your form as follows:

<FORM METHOD=POST ACTION="mailto:your@email.address">

use:

<FORM METHOD="get" ACTION="/cgi-bin/forms.cgi">

The ACTION here is pointing to the CGI script on a server. Of course your ACTION path will be dependant upon the details your ISP e-mails you.

How to Get Forms Working for Users of Microsoft Internet Explorer

Users of Microsoft Internet Explorer cannot use forms to submit their information to an e-mail address in the basic form described above. However, your ISP may well have a solution to this problem, so send them an e-mail!

Sizing Problems

You will notice some difficulty in sizing the form elements. This is a problem with the way that browsers render the form elements and is not a bug in HotDog. You may have to try experimenting with different sizes to get the effect you desire. Try putting only one form element per table cell.


Window Functions

Split-View Editing and Window Menu

HotDog Pro has a useful 3-view editing feature. This means whilst editing you can:

  1. view the HTML code of the document you are editing in the editing window;

  2. preview your webpage using live document rendering in the ROVER view (Real-time Output ViewER);

  3. view the HTML code of another open document (or the same document!) in an additional editing window simply by clicking Button to Open a Document in a Second Window..

Window Menu

The Window menu within HotDog Pro makes it easy for you to switch between open documents in either of your editing windows.

The additional editing window makes comparing the code in different documents or within the same document a simple matter. Copying and pasting between different documents or within the same document is also easy.

Buttons, URL field and ruler in the ROVER view.

The ROVER view is HotDog Pro's own internal browser, which means that as you edit you can preview the way your webpage would actually look on the internet. The more common WYSIWYG (What You See Is What You Get) approach in many webpage programs tend to hide the HTML code from authors, leading them to believe that what they see is what their audience will see, which is often not the case. Professional webmasters know that live document rendering gives them full control over their source code while still providing them with an authentic visual representation of their web page in real-time.

You even have the option of turning ROVER off, and previewing your webpages externally - simply click on Preview Button in the File toolbar and select the browser of your choice. This is especially useful for ensuring compatibility between different browsers. (HotDog Pro searches for and automatically installs any external browsers it finds on your system when you start HotDog Pro for the first time.)


Help Functions

Extended and Non-Intrusive Help

We put a lot of thought into the design of the HotDog Shell. When designing each dialog, as well as considering ease-of-use, we aimed to enhance the learning process in a convenient and non-intrusive manner. So, for example, the wizards we have created not only help you to perform involved tasks, but also provide useful tips and diagrams. On each dialog is a Question Button button that you can just click on and drag to the feature on the dialog that you would like information about. Each dialog also contains a Help button that links to extended help. Therefore, not only is the function of a dialog explained, but relevant background information and tutorials are also supplied.

Menu

Help Menu

With just a click, the HotDog Help menu lets you:

  • browse the structured contents of the comprehensive HotDog Pro help;

  • perform index and keyword searches in the help files;

  • access The Evaluator's Guide, which helps you to assess HotDog Professional 6 for your own needs;

  • display cascading style sheet help;

  • read the HotDog Overview;

  • display a summary of useful keyboard shortcuts;

  • connect to our regularly-monitored, online Sausage Island Web Forums, so that you can view or participate in informative discussions related to HTML and website design;

  • connect to useful Internet sites;

  • view your license/registration details;

  • view the exact name and version of your HotDog Pro or the HotDog credits and copyright information.

ToolTips

HotDog Pro provides advanced HTML help as well. By placing your cursor over different parts of your code, popup information (tooltips) appears about that part of the code and will even let you know if there is any unrecognized/incorrect code. By moving your cursor over color codes, an image of the color appears so that you know exactly what color you have specified in your document. This is also the case with images - by placing your cursor over your image code a small version of the image appears so that you know exactly which image has been inserted into your code. With the assistance of Code Completion and our HTML Property Sheet, learning HTML is easier than ever before.


Navigation Functions

Toolbar and Resource Panel

Quick document-navigation improves your the efficiency and productivity of website development. The Navigation toolbar complements HotDog Pro's new Navigation Viewer resource panel. Within the document that you're editing, the Navigation toolbar allows you to quickly:

  • navigate to bookmarks;

  • navigate to selected line numbers;

  • find matching characters;

  • go to the top, bottom, head or body of your document;

  • go to the previous/next tag;

  • go to the previous/next error.


Customizing the HTML Property Sheet

Introduction

Just about every part of HotDog is customizable, and the HTML Property Sheet is no exception! You can access the customization options for the HTML Property Sheet as follows:

  1. Within a document that is open in the HotDog editor, place the text insertion cursor in between the angle brackets of a tag. For example, you could place the text insertion cursor in between the < and > characters of the <BODY> tag.

  2. The HTML Property Sheet will display the properties and attributes of the <BODY> tag (or of any other tag that your text insertion cursor is positioned on).

  3. Within the HTML Property Sheet, notice that there are gray lines that act as headings for the properties listed below them. The gray lines have different HTML standards written within them.

  4. Using the right hand mouse button, click on any one of these gray lines. The context menu that appears provides you with various options for configuring the HTML Property Sheet. These options are discussed below.

HTML Property Sheet Options

Best Fit Column

Selecting this option will re-set the column widths for the property names and their attributes to provide the optimal viewing space for the information in each column.

Proportional Column

If this option is checked then the columns for the tag properties and their attributes will adjust as you resize the HTML Property Sheet resource panel, so that both columns retain the same percentage of the width of the panel after the panel is resized.

If this option is unchecked, then the first column will remain the same size, and only the width of the second column (showing the property attributes) will adjust when you change the width of the HTML Property Sheet resource panel.

Use Long Group Name

If this option is checked then the full name of each HTML standard covered by each group of properties in the HTML Property Sheet resource panel will be displayed in their respective property group heading bars (the gray lines of information in the HTML Property Sheet).

If this option is unchecked, then the names of each HTML standard are abbreviated, so that you can see more of the names without re-adjusting the width of the resource panel. For example, the "HTML 4.0 Transitional" standard title becomes "HTML40".

Use Uppercase Attribute

Selecting this option will cause all property names that you insert into a document from the HTML Property Sheet to be inserted in uppercase.

Note: Tags and attributes inserted through other wizards, buttons or menu options in HotDog are not affected by this preference setting.

Use Uppercase Value

Selecting this option will cause all property values that you insert from the HTML Property Sheet to be inserted in uppercase (this option only affects values that are selected from a drop-down list in the HTML Property Sheet. The case of attributes that you type into the HTML property sheet yourself will not be altered).

Note: Tags and attributes inserted through other wizards, buttons or menu options in HotDog are not affected by this preference setting.

Sort

This option contains several sub-options that allow you to change the order and grouping of properties displayed in the HTML Property Sheet.

Hide Attribute(s) in

The sub-options under this option allow you to prevent certain tag attributes from being displayed in the HTML Property Sheet if those attributes are defined under a particular HTML standard.


Opening The Website Manager

Opening The Websites Manager

Opening The Websites Manager Resource Panel

  1. On the View menu, select the Resource Manager submenu.

  2. Under the Resource Manager submenu, select Websites.


Stop Link Checking

Stop Checking Links

  1. In the Checks section of the WebSite Manager, click on the external resource you want to check.

  2. Click [image].


Edit A File Associated With A Task

Editing Files Associated With Tasks

How To Edit A File Associated With A Task

To open a HTML file that is associated with a task:

  1. Open the website you want to edit.

  2. In the Websites Manager resource panel, click on the Tasks tab.

  3. Right-click on the task associated with the file you want to edit (in the Subject column).

  4. Select Edit Task File.


Customizing HotDog

Preferences, Tags, Macros, Style Sheets and SuperToolz

HotDog Pro 6 has been designed to be both flexible and customizable. To enhance your own HotDog Experience, we have made it possible for you to specify your preferences in all different aspects of website development, including:

  • the appearance and functionality of your environment and editing window;

  • the internal preview (ROVER) and browser settings;

  • dictionaries;

  • the directory, publishing and server settings.

You can also create your own shortcut keys for different tasks, html tags and macros. Toolbars are one of the quickest ways to access functionality in HotDog Pro, so the toolbars in HotDog Pro 6 are completely customizable. With just a few clicks, you can add/remove functions, HTML tags and macros from any toolbar.

What Do You Want To Do?

Edit My Preferences.

Create Shortcuts for Tags.

Use Macros.

Use Style Sheets.

Use SuperToolz.

Use Style Sheets.


Status Bar Extras

Introduction

In the bottom right hand corner of the HotDog editor you will see an area of the status bar where the column and row location of the editor text insertion caret is displayed.

If you click on this column and row number (displayed in X:X format, e.g. 1:1) using the right hand mouse button, then a context menu will appear with a number of options, as listed below. These options cause different types of information to display in the HotDog status bar.

The options that you can select from include:

  • Caret Position (default)

  • Date/Time

  • Memory Information

  • System Information

  • Mouse Position

  • Program Running Time

  • Time at Sausage Software

  • Eyes

  • Drug Eyes

  • Random Comments

  • HotDog Team BAC (Blood Alcohol Content)

  • World Population

Try them out - they're fun!


Copyright Details

This modified HTML 4.0 reference has its basis in the Web Design Group's edition of the HTML 4.0 Specification.

Thanks go to the Web Design Group, in particular Liam Quinn (who wrote most of the original HTML source) and John Pozadzides. Sincere thanks also to Peter Hurst, Sausage Software's previous Technical Writer.

In the process of modifying this HTML reference, some errors may have been introduced. If so please email me and not the Web Design Group.

All the pages in this combined Sausage Software and Web Design Group specification are copyright of Liam Quinn and Sausage Software, 1998.

All modifications to the orginal WDG spec are copyrighted to Sausage Software, 1998.

Contact Details

Liam Quinn (Web Design Group)
Nhi Hoang (Sausage Software)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Reference

HTML 4.0 became a W3C Recommendation in December of 1997. The new HTML standard provides a number of significant improvements over previous versions of the language while emphasizing the concepts of accessibility and structural markup.

Contents

What's New in HTML 4.0
A summary of the new features in HTML 4.0 and a look at the key concepts behind the new standard.
Structure of an HTML 4.0 Document
An explanation of elements, tags, and attributes, and how they are used in an HTML 4.0 document.
Organizational List of HTML 4.0 Elements
All HTML 4.0 elements organized by their function.
Alphabetical List of HTML 4.0 Elements
All HTML 4.0 elements listed alphabetically.
HTML 4.0 Entities
All character entity references in HTML 4.0 along with their numeric character references and rendering in your browser.
Offline Versions
Downloadable versions of this reference suitable for offline use.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


What's New in HTML 4.0

  • New Elements in HTML 4.0
  • Separation of Structure and Presentation
  • Accessibility
  • Internationalization
  • Style Sheets
  • Client-side Scripting
  • Frames
  • Advanced Tables

New Elements in HTML 4.0

The following elements are new in HTML 4.0:

  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • BDO - BiDi override
  • BUTTON - Button
  • COL - Table column
  • COLGROUP - Table column group
  • DEL - Deleted text
  • FIELDSET - Form control group
  • FRAME - Frame
  • FRAMESET - Frameset
  • IFRAME - Inline frame
  • INS - Inserted text
  • LABEL - Form field label
  • LEGEND - Fieldset caption
  • NOFRAMES - Frames alternate content
  • NOSCRIPT - Alternate script content
  • OBJECT - Object
  • OPTGROUP - Option group
  • Q - Short quotation
  • S - Strike-through text
  • SPAN - Generic inline container
  • TBODY - Table body
  • TFOOT - Table foot
  • THEAD - Table head

Separation of Structure and Presentation

By deprecating many presentational features from HTML 3.2 and adding hooks for style sheets, HTML 4.0 encourages separating a document's structure from its presentation. This concept is key to understanding HTML 4.0.

When authors use HTML to markup a document's structure and style sheets to suggest the document's presentation, they can more easily achieve the device-independence that helped bring HTML its initial popularity. A document with a rich structure can be presented in many different ways on different media, allowing the document to adjust to new technologies such as phone or in-car aural browsers. The separation of content and presentation also allows authors to change the presentation of an entire site by editing a single style sheet, providing significant advantages in site maintenance.

Accessibility

Many of HTML 4.0's improvements in the area of accessibility follow from its emphasis on the separation of structure and presentation. When HTML is used structurally, a document can adapt to different browsing environments, accommodating large fonts, special colors, speech synthesizers, and Braille tactile feedback devices. This adaptability allows blind, low-vision, colorblind, and cognitively-challenged users access to the Web, opening a door for the world's 600 million disabled people.

HTML 4.0 includes many new elements and attributes aimed at improving the Web's accessibility. The multi-dimensional nature of HTML tables has long posed problems for non-visual browsing, but new attributes on the TABLE, TH, and TD elements allow table summaries and a more explicit association between a cell and its header information. These attributes give non-visual browsers the ability to render a cell's header information, possibly in an abbreviated form, before giving the cell's content.

New elements in HTML 4.0 also bring accessibility improvements to forms. The new FIELDSET element allows form controls to be grouped together and the LEGEND element provides a caption for the group. By grouping related form controls, authors allow those with non-visual browsers to more easily navigate complicated forms. As well, the new LABEL element associates a text label with a form control so that users can more easily determine what information is required in a given field.

Other accessibility improvements include full image descriptions through the LONGDESC attribute on the IMG element, rich alternatives to images and videos through the OBJECT element, and richer alternatives to image maps through a new content model for the MAP element.

Internationalization

To allow representation of the world's languages, HTML 4.0 adopts the Universal Character Set as its character set. Previous versions of HTML were restricted to ISO-8859-1, a character set that only handled some western European languages. The Universal Character Set is character-by-character equivalent to Unicode 2.0 and contains characters for almost all of the world's languages.

The LANG and DIR attributes are new in HTML 4.0 and apply to almost all elements. These attributes allow authors to specify the language and directionality of text. The BDO element allows authors to override the bidirectional algorithm used when right-to-left text such as Hebrew is presented.

HTML 4.0 also offers new entities for easy entry of mathematical symbols and Greek letters as well as other special characters.

Style Sheets

HTML 4.0 adds new hooks for style sheets, which suggest how a document is presented. The new ID, CLASS, and STYLE attributes allow style information to be attached to specific elements. The LINK and STYLE elements have new TYPE and MEDIA attributes for specifying the style sheet language and target media, respectively.

Client-side Scripting

HTML 4.0 embraces client-side scripting through the addition of a number of new attributes. The SCRIPT element now includes attributes for specifying the scripting language, embedding an external script, and deferring execution of a script. As well, a number of event attributes have been added to enable execution of a script upon events such as the user clicking an element, pressing a key, moving the mouse over an element, or changing the value of a form control.

The NOSCRIPT element, also new in HTML 4.0, provides alternate content for browsers with client-side scripting disabled or not supported.

Frames

The inclusion of frames in HTML 4.0 gives authors the ability to present multiple documents in one window. The frames model used in HTML 4.0 is not changed from the flawed frames model originally proposed by Netscape.

Advanced Tables

The simple table model of HTML 3.2 is expanded in HTML 4.0 to include row and column groups, greater flexibility in defining a table's rules, and accessibility improvements. The use of row groups (THEAD, TFOOT, TBODY) allows visual browsers to render static header and footer rows with scrollable body rows, thus improving the readability of large tables.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


Structure of an HTML 4.0 Document

Structure of a HTML 4.0 Document

  • Elements and Tags
  • Attributes
  • Special Characters
  • Comments
  • A Complete HTML 4.0 Document
  • Validating your HTML

Elements and Tags

Elements are the structures that describe parts of an HTML document. For example, the P element represents a paragraph while the EM element gives emphasized content.

An element has three parts: a start tag, content, and an end tag. A tag is special text--"markup"--that is delimited by "<" and ">". An end tag includes a "/" after the "<". For example, the EM element has a start tag, <EM>, and an end tag, </EM>. The start and end tags surround the content of the EM element:

<EM>This is emphasized text</EM>

Element names are always case-insensitive, so <em>, <eM>, and <EM> are all the same.

Elements cannot overlap each other. If the start tag for an EM element appears within a P, the EM's end tag must also appear within the same P element.

Some elements allow the start or end tag to be omitted. For example, the LI end tag is always optional since the element's end is implied by the next LI element or by the end of the list:

<UL>
  <LI>First list item; no end tag
  <LI>Second list item; optional end tag included</LI>
  <LI>Third list item; no end tag
</UL>

Some elements have no end tag because they have no content. These elements, such as the BR element for line breaks, are represented only by a start tag and are said to be empty.

Attributes

An element's attributes define various properties for the element. For example, the IMG element takes a SRC attribute to provide the location of the image and an ALT attribute to give alternate text for those not loading images:

<IMG SRC="wdglogo.gif" ALT="Web Design Group">

An attribute is included in the start tag only--never the end tag--and takes the form Attribute-name="Attribute-value". The attribute value is delimited by single or double quotes. The quotes are optional if the attribute value consists solely of letters in the range A-Z and a-z, digits (0-9), hyphens ("-"), and periods (".").

Attribute names are case-insensitive, but attribute values may be case-sensitive.

Special Characters

Certain characters in HTML are reserved for use as markup and must be escaped to appear literally. The "<" character may be represented with an entity, &lt;. Similarly, ">" is escaped as &gt;, and "&" is escaped as &amp;. If an attribute value contains a double quotation mark and is delimited by double quotation marks, then the quote should be escaped as &quot;.

Other entities exist for special characters that cannot easily be entered with some keyboards. For example, the copyright symbol ("©") may be represented with the entity &copy;. See the Entities section for a complete list of HTML 4.0 entities.

As an alternative to entities, authors may also use numeric character references. Any character may be represented by a numeric character reference based on its "code position" in Unicode. For example, one could use &#169; for the copyright symbol or &#1575; for the Arabic letter ALEF.

Comments

Comments in HTML have a complicated syntax that can be simplified by following this rule: Begin a comment with "<!--", end it with "-->", and do not use "--" within the comment.

<!-- An example comment -->

A Complete HTML 4.0 Document

An HTML 4.0 document begins with a DOCTYPE declaration that declares the version of HTML to which the document conforms. The HTML element follows and contains the HEAD and BODY. The HEAD contains information about the document, such as its title and keywords, while the BODY contains the actual content of the document, made up of block-level elements and inline elements. A basic HTML 4.0 document takes on the following form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
  <HEAD>
    <TITLE>The document title</TITLE>
  </HEAD>
  <BODY>
    <H1>Main heading</H1>
    <P>A paragraph.</P>
    <P>Another paragraph.</P>
    <UL>
      <LI>A list item.</LI>
      <LI>Another list item.</LI>
    </UL>
  </BODY>
</HTML>

In a Frameset document, the FRAMESET element replaces the BODY element.

Validating your HTML

Each HTML document should be validated to check for errors such as missing quotation marks (<A HREF="oops.html>Oops</A>), misspelled element or attribute names, and invalid structures. Such errors are not always apparent when viewing a document in a browser since browsers are designed to recover from an author's errors. However, different browsers recover in different ways, sometimes resulting in invisible text on one browser but not on others.

The W3C HTML Validation Service checks the validity of HTML 4.0 documents.

Note that some programs claim to be validators but really are not. A validator checks a document against a formal document type definition (DTD) while other programs such as lints warn about valid but unsafe HTML. Both kinds of programs are useful, but validation should never be forgotten.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DOCTYPE - Document Type Declaration

Each HTML document must begin with a document type declaration that declares which version of HTML the document adheres to. HTML 4.0 comes in three flavors, each with a different DOCTYPE:

HTML 4.0 Strict

HTML 4.0 Strict is a trimmed down version of HTML 4.0 that emphasizes structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames, and link targets are not allowed in HTML 4.0 Strict. By writing to HTML 4.0 Strict authors can achieve accessible, structurally rich documents that easily adapt to style sheets and different browsing situations. However, since many browsers lack full support for style sheets, HTML 4.0 Strict documents may look bland on common visual browsers such as Netscape Navigator 3.x.

The document type declaration for HTML 4.0 Strict is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
HTML 4.0 Transitional

HTML 4.0 Transitional includes all elements and attributes of HTML 4.0 Strict but adds presentational attributes, deprecated elements, and link targets. HTML 4.0 Transitional recognizes the relatively poor browser support for style sheets, allowing many HTML presentation features to be used as a transition towards HTML 4.0 Strict.

The document type declaration for HTML 4.0 Transitional is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
HTML 4.0 Frameset

HTML 4.0 Frameset is a variant of HTML 4.0 Transitional for documents that use frames. The FRAMESET element replaces the BODY in a Frameset document.

The document type declaration for HTML 4.0 Frameset is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
        "http://www.w3.org/TR/REC-html40/frameset.dtd">

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Entities

Entities

Character entity references, or entities for short, provide a method of entering characters that cannot be expressed in the document's character encoding or that cannot easily be entered on a keyboard. Entities are case-sensitive and take the form &name;. Examples of entities include &copy; for the copyright symbol and &Alpha; for the Greek capital letter alpha.

In addition to entities, authors can use numeric character references. While entities are limited to a subset of Unicode characters, numeric character references can specify any character. Numeric character references may be given in decimal or hexadecimal, though browser support is stronger for decimal references. Decimal references are of the form &#number; while hexadecimal references take the case-insensitive form &#xnumber;. Examples of numeric character references include &#169; or &#xA9; for the copyright symbol, &#913; or &#x391; for the Greek capital letter alpha, and &#1575; or &#x627; for the Arabic letter ALEF.

Note that hexadecimal character references will cause errors with current validators since these references are defined in a recent revision to the SGML standard that is not yet supported by validators.

The following documents feature tables of the character entity references in HTML 4.0, along with the numeric character reference in decimal and hexadecimal. A rendering of each character reference is provided so that users may check their browsers' compliance.

  • Symbols and Greek Letters
  • Other Special Characters

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Special Entities

Special Entities

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for markup-significant and internationalization characters, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

With the exception of HTML 2.0's &quot;, &amp;, &lt;, and &gt;, browser support for these entities is generally quite poor, but recent browsers support some of the character entity references and decimal character references.

Note that hexadecimal character references will cause errors with current validators since these references are defined in a recent revision to the SGML standard that is not yet supported by validators.

Character | Entity | Decimal | Hex | Rendering in Your Browser
 |  |  |  | Entity | Decimal | Hex
quotation mark = APL quote | &quot; | &#34; | &#x22; | " | " | "
ampersand | &amp; | &#38; | &#x26; | & | & | &
less-than sign | &lt; | &#60; | &#x3C; | < | < | <
greater-than sign | &gt; | &#62; | &#x3E; | > | > | >
Latin capital ligature OE | &OElig; | &#338; | &#x152; | Œ | Œ | Œ
Latin small ligature oe | &oelig; | &#339; | &#x153; | œ | œ | œ
Latin capital letter S with caron | &Scaron; | &#352; | &#x160; | Š | Š | Š
Latin small letter s with caron | &scaron; | &#353; | &#x161; | š | š | š
Latin capital letter Y with diaeresis | &Yuml; | &#376; | &#x178; | Ÿ | Ÿ | Ÿ
modifier letter circumflex accent | &circ; | &#710; | &#x2C6; | ˆ | ˆ | ˆ
small tilde | &tilde; | &#732; | &#x2DC; | ˜ | ˜ | ˜
en space | &ensp; | &#8194; | &#x2002; |  |  |
em space | &emsp; | &#8195; | &#x2003; |  |  |
thin space | &thinsp; | &#8201; | &#x2009; |  |  |
zero width non-joiner | &zwnj; | &#8204; | &#x200C; | ‌ | ‌ | ‌
zero width joiner | &zwj; | &#8205; | &#x200D; | ‍ | ‍ | ‍
left-to-right mark | &lrm; | &#8206; | &#x200E; | ‎ | ‎ | ‎
right-to-left mark | &rlm; | &#8207; | &#x200F; | ‏ | ‏ | ‏
en dash | &ndash; | &#8211; | &#x2013; | – | – | –
em dash | &mdash; | &#8212; | &#x2014; | — | — | —
left single quotation mark | &lsquo; | &#8216; | &#x2018; | ‘ | ‘ | ‘
right single quotation mark | &rsquo; | &#8217; | &#x2019; | ’ | ’ | ’
single low-9 quotation mark | &sbquo; | &#8218; | &#x201A; | ‚ | ‚ | ‚
left double quotation mark | &ldquo; | &#8220; | &#x201C; | “ | “ | “
right double quotation mark | &rdquo; | &#8221; | &#x201D; | ” | ” | ”
double low-9 quotation mark | &bdquo; | &#8222; | &#x201E; | „ | „ | „
dagger | &dagger; | &#8224; | &#x2020; | † | † | †
double dagger | &Dagger; | &#8225; | &#x2021; | ‡ | ‡ | ‡
per mille sign | &permil; | &#8240; | &#x2030; | ‰ | ‰ | ‰
single left-pointing angle quotation mark | &lsaquo; | &#8249; | &#x2039; | ‹ | ‹ | ‹
single right-pointing angle quotation mark | &rsaquo; | &#8250; | &#x203A; | › | › | ›
euro sign | &euro; | &#8364; | &#x20AC; | € | € | €

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Entities for Symbols and Greek Letters

Entities for Symbols and Greek Letters

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for symbols and Greek letters, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

Browser support for these entities is generally quite poor, but recent browsers support some of the character entity references and decimal character references.

Note that hexadecimal character references will cause errors with current validators since these references are defined in a recent revision to the SGML standard that is not yet supported by validators.

Character | Entity | Decimal | Hex | Rendering in Your Browser
 |  |  |  | Entity | Decimal | Hex
Latin small f with hook = function = florin | &fnof; | &#402; | &#x192; | ƒ | ƒ | ƒ
Greek capital letter alpha | &Alpha; | &#913; | &#x391; | Α | Α | Α
Greek capital letter beta | &Beta; | &#914; | &#x392; | Β | Β | Β
Greek capital letter gamma | &Gamma; | &#915; | &#x393; | Γ | Γ | Γ
Greek capital letter delta | &Delta; | &#916; | &#x394; | Δ | Δ | Δ
Greek capital letter epsilon | &Epsilon; | &#917; | &#x395; | Ε | Ε | Ε
Greek capital letter zeta | &Zeta; | &#918; | &#x396; | Ζ | Ζ | Ζ
Greek capital letter eta | &Eta; | &#919; | &#x397; | Η | Η | Η
Greek capital letter theta | &Theta; | &#920; | &#x398; | Θ | Θ | Θ
Greek capital letter iota | &Iota; | &#921; | &#x399; | Ι | Ι | Ι
Greek capital letter kappa | &Kappa; | &#922; | &#x39A; | Κ | Κ | Κ
Greek capital letter lambda | &Lambda; | &#923; | &#x39B; | Λ | Λ | Λ
Greek capital letter mu | &Mu; | &#924; | &#x39C; | Μ | Μ | Μ
Greek capital letter nu | &Nu; | &#925; | &#x39D; | Ν | Ν | Ν
Greek capital letter xi | &Xi; | &#926; | &#x39E; | Ξ | Ξ | Ξ
Greek capital letter omicron | &Omicron; | &#927; | &#x39F; | Ο | Ο | Ο
Greek capital letter pi | &Pi; | &#928; | &#x3A0; | Π | Π | Π
Greek capital letter rho | &Rho; | &#929; | &#x3A1; | Ρ | Ρ | Ρ
Greek capital letter sigma | &Sigma; | &#931; | &#x3A3; | Σ | Σ | Σ
Greek capital letter tau | &Tau; | &#932; | &#x3A4; | Τ | Τ | Τ
Greek capital letter upsilon | &Upsilon; | &#933; | &#x3A5; | Υ | Υ | Υ
Greek capital letter phi | &Phi; | &#934; | &#x3A6; | Φ | Φ | Φ
Greek capital letter chi | &Chi; | &#935; | &#x3A7; | Χ | Χ | Χ
Greek capital letter psi | &Psi; | &#936; | &#x3A8; | Ψ | Ψ | Ψ
Greek capital letter omega | &Omega; | &#937; | &#x3A9; | Ω | Ω | Ω
Greek small letter alpha | &alpha; | &#945; | &#x3B1; | α | α | α
Greek small letter beta | &beta; | &#946; | &#x3B2; | β | β | β
Greek small letter gamma | &gamma; | &#947; | &#x3B3; | γ | γ | γ
Greek small letter delta | &delta; | &#948; | &#x3B4; | δ | δ | δ
Greek small letter epsilon | &epsilon; | &#949; | &#x3B5; | ε | ε | ε
Greek small letter zeta | &zeta; | &#950; | &#x3B6; | ζ | ζ | ζ
Greek small letter eta | &eta; | &#951; | &#x3B7; | η | η | η
Greek small letter theta | &theta; | &#952; | &#x3B8; | θ | θ | θ
Greek small letter iota | &iota; | &#953; | &#x3B9; | ι | ι | ι
Greek small letter kappa | &kappa; | &#954; | &#x3BA; | κ | κ | κ
Greek small letter lambda | &lambda; | &#955; | &#x3BB; | λ | λ | λ
Greek small letter mu | &mu; | &#956; | &#x3BC; | μ | μ | μ
Greek small letter nu | &nu; | &#957; | &#x3BD; | ν | ν | ν
Greek small letter xi | &xi; | &#958; | &#x3BE; | ξ | ξ | ξ
Greek small letter omicron | &omicron; | &#959; | &#x3BF; | ο | ο | ο
Greek small letter pi | &pi; | &#960; | &#x3C0; | π | π | π
Greek small letter rho | &rho; | &#961; | &#x3C1; | ρ | ρ | ρ
Greek small letter final sigma | &sigmaf; | &#962; | &#x3C2; | ς | ς | ς
Greek small letter sigma | &sigma; | &#963; | &#x3C3; | σ | σ | σ
Greek small letter tau | &tau; | &#964; | &#x3C4; | τ | τ | τ
Greek small letter upsilon | &upsilon; | &#965; | &#x3C5; | υ | υ | υ
Greek small letter phi | &phi; | &#966; | &#x3C6; | φ | φ | φ
Greek small letter chi | &chi; | &#967; | &#x3C7; | χ | χ | χ
Greek small letter psi | &psi; | &#968; | &#x3C8; | ψ | ψ | ψ
Greek small letter omega | &omega; | &#969; | &#x3C9; | ω | ω | ω
Greek small letter theta symbol | &thetasym; | &#977; | &#x3D1; | ϑ | ϑ | ϑ
Greek upsilon with hook symbol | &upsih; | &#978; | &#x3D2; | ϒ | ϒ | ϒ
Greek pi symbol | &piv; | &#982; | &#x3D6; | ϖ | ϖ | ϖ
bullet = black small circle | &bull; | &#8226; | &#x2022; | • | • | •
horizontal ellipsis = three dot leader | &hellip; | &#8230; | &#x2026; | … | … | …
prime = minutes = feet | &prime; | &#8242; | &#x2032; | ′ | ′ | ′
double prime = seconds = inches | &Prime; | &#8243; | &#x2033; | ″ | ″ | ″
overline = spacing overscore | &oline; | &#8254; | &#x203E; | ‾ | ‾ | ‾
fraction slash | &frasl; | &#8260; | &#x2044; | ⁄ | ⁄ | ⁄
script capital P = power set = Weierstrass p | &weierp; | &#8472; | &#x2118; | ℘ | ℘ | ℘
blackletter capital I = imaginary part | &image; | &#8465; | &#x2111; | ℑ | ℑ | ℑ
blackletter capital R = real part symbol | &real; | &#8476; | &#x211C; | ℜ | ℜ | ℜ
trade mark sign | &trade; | &#8482; | &#x2122; | ™ | ™ | ™
alef symbol = first transfinite cardinal | &alefsym; | &#8501; | &#x2135; | ℵ | ℵ | ℵ
leftwards arrow | &larr; | &#8592; | &#x2190; | ← | ← | ←
upwards arrow | &uarr; | &#8593; | &#x2191; | ↑ | ↑ | ↑
rightwards arrow | &rarr; | &#8594; | &#x2192; | → | → | →
downwards arrow | &darr; | &#8595; | &#x2193; | ↓ | ↓ | ↓
left right arrow | &harr; | &#8596; | &#x2194; | ↔ | ↔ | ↔
downwards arrow with corner leftwards = carriage return | &crarr; | &#8629; | &#x21B5; | ↵ | ↵ | ↵
leftwards double arrow | &lArr; | &#8656; | &#x21D0; | ⇐ | ⇐ | ⇐
upwards double arrow | &uArr; | &#8657; | &#x21D1; | ⇑ | ⇑ | ⇑
rightwards double arrow | &rArr; | &#8658; | &#x21D2; | ⇒ | ⇒ | ⇒
downwards double arrow | &dArr; | &#8659; | &#x21D3; | ⇓ | ⇓ | ⇓
left right double arrow | &hArr; | &#8660; | &#x21D4; | ⇔ | ⇔ | ⇔
for all | &forall; | &#8704; | &#x2200; | ∀ | ∀ | ∀
partial differential | &part; | &#8706; | &#x2202; | ∂ | ∂ | ∂
there exists | &exist; | &#8707; | &#x2203; | ∃ | ∃ | ∃
empty set = null set = diameter | &empty; | &#8709; | &#x2205; | ∅ | ∅ | ∅
nabla = backward difference | &nabla; | &#8711; | &#x2207; | ∇ | ∇ | ∇
element of | &isin; | &#8712; | &#x2208; | ∈ | ∈ | ∈
not an element of | &notin; | &#8713; | &#x2209; | ∉ | ∉ | ∉
contains as member | &ni; | &#8715; | &#x220B; | ∋ | ∋ | ∋
n-ary product = product sign | &prod; | &#8719; | &#x220F; | ∏ | ∏ | ∏
n-ary sumation | &sum; | &#8721; | &#x2211; | ∑ | ∑ | ∑
minus sign | &minus; | &#8722; | &#x2212; | − | − | −
asterisk operator | &lowast; | &#8727; | &#x2217; | ∗ | ∗ | ∗
square root = radical sign | &radic; | &#8730; | &#x221A; | √ | √ | √
proportional to | &prop; | &#8733; | &#x221D; | ∝ | ∝ | ∝
infinity | &infin; | &#8734; | &#x221E; | ∞ | ∞ | ∞
angle | &ang; | &#8736; | &#x2220; | ∠ | ∠ | ∠
logical and = wedge | &and; | &#8743; | &#x2227; | ∧ | ∧ | ∧
logical or = vee | &or; | &#8744; | &#x2228; | ∨ | ∨ | ∨
intersection = cap | &cap; | &#8745; | &#x2229; | ∩ | ∩ | ∩
union = cup | &cup; | &#8746; | &#x222A; | ∪ | ∪ | ∪
integral | &int; | &#8747; | &#x222B; | ∫ | ∫ | ∫
therefore | &there4; | &#8756; | &#x2234; | ∴ | ∴ | ∴
tilde operator = varies with = similar to | &sim; | &#8764; | &#x223C; | ∼ | ∼ | ∼
approximately equal to | &cong; | &#8773; | &#x2245; | ≅ | ≅ | ≅
almost equal to = asymptotic to | &asymp; | &#8776; | &#x2248; | ≈ | ≈ | ≈
not equal to | &ne; | &#8800; | &#x2260; | ≠ | ≠ | ≠
identical to | &equiv; | &#8801; | &#x2261; | ≡ | ≡ | ≡
less-than or equal to | &le; | &#8804; | &#x2264; | ≤ | ≤ | ≤
greater-than or equal to | &ge; | &#8805; | &#x2265; | ≥ | ≥ | ≥
subset of | &sub; | &#8834; | &#x2282; | ⊂ | ⊂ | ⊂
superset of | &sup; | &#8835; | &#x2283; | ⊃ | ⊃ | ⊃
not a subset of | &nsub; | &#8836; | &#x2284; | ⊄ | ⊄ | ⊄
subset of or equal to | &sube; | &#8838; | &#x2286; | ⊆ | ⊆ | ⊆
superset of or equal to | &supe; | &#8839; | &#x2287; | ⊇ | ⊇ | ⊇
circled plus = direct sum | &oplus; | &#8853; | &#x2295; | ⊕ | ⊕ | ⊕
circled times = vector product | &otimes; | &#8855; | &#x2297; | ⊗ | ⊗ | ⊗
up tack = orthogonal to = perpendicular | &perp; | &#8869; | &#x22A5; | ⊥ | ⊥ | ⊥
dot operator | &sdot; | &#8901; | &#x22C5; | ⋅ | ⋅ | ⋅
left ceiling = APL upstile | &lceil; | &#8968; | &#x2308; | ⌈ | ⌈ | ⌈
right ceiling | &rceil; | &#8969; | &#x2309; | ⌉ | ⌉ | ⌉
left floor = APL downstile | &lfloor; | &#8970; | &#x230A; | ⌊ | ⌊ | ⌊
right floor | &rfloor; | &#8971; | &#x230B; | ⌋ | ⌋ | ⌋
left-pointing angle bracket = bra | &lang; | &#9001; | &#x2329; | ⟨ | 〈 | 〈
right-pointing angle bracket = ket | &rang; | &#9002; | &#x232A; | ⟩ | 〉 | 〉
lozenge | &loz; | &#9674; | &#x25CA; | ◊ | ◊ | ◊
black spade suit | &spades; | &#9824; | &#x2660; | ♠ | ♠ | ♠
black club suit = shamrock | &clubs; | &#9827; | &#x2663; | ♣ | ♣ | ♣
black heart suit = valentine | &hearts; | &#9829; | &#x2665; | ♥ | ♥ | ♥
black diamond suit | &diams; | &#9830; | &#x2666; | ♦ | ♦ | ♦

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Common Attributes

A number of attributes in HTML 4.0 are common to most elements. These attributes are divided into core attributes, internationalization attributes, and scripting events.

Core Attributes

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

Common Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Attributes Values

HTML 4.0 Attribute Values

There are various kinds of attribute values in HTML 4.0. This document describes common types of values.

CDATA

Attribute values of type CDATA are made up of a sequence of characters that may include entities. Line feeds are ignored while each carriage return and tab is replaced with a space. Browsers may ignore leading and trailing whitespace within the attribute value.

CDATA attribute values are typically case-sensitive, though this is not the case with all attributes that take CDATA values.

ID and NAME

Attribute values of type ID and NAME must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). These values are case-sensitive.

IDREF and IDREFS

IDREF and IDREFS values refer to values of other elements' ID attributes. An IDREF value is a single ID while an IDREFS value is a space-separated list of IDs. IDREF and IDREFS are case-sensitive.

Number

Number attribute values are numbers made of at least one digit in the range 0-9.

Text

Text attribute values are CDATA values intended to be human readable strings.

url

url attribute values are Uniform Resource Identifiers (urls), as defined in the url Internet-Draft, a work-in-progress that is expected to replace RFC 1738 and RFC 1808.

url attribute values may include full urls such as http://www.htmlhelp.com/ as well as relative urls such as foo.html and ../foo/.

While parts of a url may be case-insensitive, in general url values are case-sensitive.

Color

Color attribute values give a color definition. The value can be any hexadecimal number, specified according to the sRGB color space, or one of sixteen color names. Hexadecimal numbers must be prefixed by a "#" character.

The case-insensitive color names and their sRGB values are as follows:

Color Name | sRGB Value
Black | #000000
Silver | #C0C0C0
Gray | #808080
White | #FFFFFF
Maroon | #800000
Red | #FF0000
Purple | #800080
Fuchsia | #FF00FF
Green | #008000
Lime | #00FF00
Olive | #808000
Yellow | #FFFF00
Navy | #000080
Blue | #0000FF
Teal | #008080
Aqua | #00FFFF

Note that the hexadecimal form is better supported than the color names for the color attributes of BODY.

Pixels

These attribute values are integers that represent a number of pixels.

Length

Length attribute values may be either an integer--interpreted as a number of pixels--or a percentage of the horizontal or vertical space. The value 50% means half the available space while 50 means 50 pixels.

MultiLength and MultiLengths

MultiLength attribute values may be an integer in pixels, a percentage of the horizontal or vertical space, or a relative length expressed as i* where i is an integer. In allotting space, a browser first allots pixel and percentage lengths, then divides the remaining space among all elements with a relative length. An element with a length of 3* will be allotted three times the space of an element with length 1*. The value * is equivalent to 1* and is often used to mean "fill the remaining space."

A MultiLengths value is a comma-separated list of MultiLength values.

ContentType and ContentTypes

These attribute values are content types (also known as media types or MIME types) of a linked or embedded resource. Values of type ContentType give a single content type while values of type ContentTypes give a comma-separated list of content types. Content types are case-insensitive.

Commonly used content types include text/html, image/jpeg, model/vrml, video/quicktime, application/java, text/css, and text/javascript. Many common content types are registered at the IANA.

LanguageCode

Attribute values of type LanguageCode specify a language code according to RFC 1766. Examples of language codes include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code, which is case-insensitive.

Charset and Charsets

These attribute values specify character encodings of linked resources. Values of type Charset give a single character encoding while values of type Charsets give a space- and/or comma-separated list of character encodings. Character encodings are case-insensitive.

Examples of character encodings include ISO-8859-1, SHIFT_JIS, and UTF-8. A list of registered character encodings is available at the IANA.

Character

Character attribute values take a single Unicode character. The character may be specified with an entity.

Datetime

Datetime attribute values give a date and time in the format YYYY-MM-DDThh:mm:ssTZD where YYYY is a four-digit year, MM is a two-digit month (01 through 12), DD is a two-digit day (01 through 31), hh is a two-digit hour (00 through 23), mm is a two-digit minute (00 through 59), ss is a two-digit second (00 through 59), and TZD is the time zone designator. Note that the T separating the date from the time must appear literally and is case-sensitive.

The time zone designator may be one of the following:

  • Z (case-sensitive), which indicates Universal Coordinated Time (UTC, basically the same as GMT);
  • +hh:mm, the time ahead of UTC in hours and minutes;
  • -hh:mm, the time behind UTC in hours and minutes.

If any of the two-digit components of the Datetime value are unknown, 00 should be used.

LinkTypes

Attribute values of type LinkTypes give a space-separated list of link types. A link type is case-insensitive and may not contain whitespace. Each link type may be used any number of times in a given document.

While link types are case-insensitive, the Lynx browser will render LINK elements with the same case as is given in the REL or REV attribute. Authors should therefore be consistent in their case, and may wish to capitalize the first letter while using lowercase for the rest.

The following link types are defined in HTML 4.0, though authors may use other link types. The Made link type, widely used as <LINK REV=Made HREF="mailto:liam@htmlhelp.com"> to provide a contact link for the document author, is notably missing from the list of link types defined in HTML 4.0.

  • Alternate specifies an alternate version of the document. When used with the LINK element's HREFLANG attribute, this value implies a translation of the document. When used with LINK's MEDIA attribute, a media-specific version (e.g., for printing) is implied.
  • StyleSheet specifies an external style sheet for the document. This link type can be combined with the Alternate link type to define an alternate style sheet for the user to choose.
  • Start specifies the first document in a collection.
  • Next specifies the next document in a suggested sequence of reading. Browsers such as WebTV will preload documents identified as "next" to improve the perceived load time.
  • Prev specifies the previous document in a suggested sequence of reading.
  • Contents specifies a table of contents for the document.
  • Index gives an index for the document.
  • Glossary gives a glossary of terms used in the document.
  • Copyright specifies a document with copyright information.
  • Chapter specifies the chapter of a collection of documents.
  • Section specifies the section of a collection of documents.
  • Subsection specifies a subsection of a collection of documents.
  • Appendix gives an appendix for the collection of documents.
  • Help specifies a help document.
  • Bookmark refers to a key related document. The TITLE attribute provides a label for the bookmark.

MediaDesc

Attribute values of type MediaDesc are media descriptors--a comma-separated list of media for which the linked resource is tailored. Media descriptors are case-sensitive.

The following media descriptors are defined in HTML 4.0:

  • screen (the default), for non-paged computer screens;
  • tty, for fixed-pitch character grid displays (such as the display used by Lynx);
  • tv, for television-type devices with low resolution and limited scrollability;
  • projection, for projectors;
  • handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
  • print, for output to a printer;
  • braille, for braille tactile feedback devices;
  • aural, for speech synthesizers;
  • all, for all devices.

Script

Script attribute values are client-side scripts, typically a function call or a few short statements. The value may contain entities (e.g., &quot;).

StyleSheet

Attribute values of type StyleSheet are style sheet data. The value may contain entities.

FrameTarget

Attribute values of type FrameTarget must begin with a letter in the range A-Z or a-z, with the exception of the following special values that begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Deprecated Features

A number of elements and attributes are deprecated in HTML 4.0 as an indication that other methods of accomplishing the same task are preferred. Deprecated features may become obsolete in future versions of HTML, though browsers that support the features will likely continue to support them. Deprecated features are included in HTML 4.0 Transitional and HTML 4.0 Frameset but not HTML 4.0 Strict.

Many presentational elements and attributes are deprecated in favor of style sheets, which allow authors to suggest a presentation with more flexibility and without sacrificing accessibility. Presentational attributes that cannot currently be replaced with style sheets are in most cases not deprecated.

The following elements are deprecated in favor of style sheets:

  • BASEFONT - Base font change
  • CENTER - Centered block
  • FONT - Font change
  • S - Strike-through text
  • STRIKE - Strike-through text
  • U - Underlined text

The following elements are also deprecated:

  • APPLET - Java applet (deprecated in favor of OBJECT)
  • DIR - Directory list (deprecated in favor of UL)
  • ISINDEX - Input prompt (deprecated in favor of INPUT)
  • MENU - Menu list (deprecated in favor of UL)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Frames

Frames

Frames allow an author to display multiple documents in a single window that is divided into rectangular subspaces called frames. Visual browsers allow these frames to be scrolled independently of each other, and links can be loaded in a frame without changing the content of other frames.

The HTML 4.0 frames model has significant flaws that make frames hated by many users. Frames should only be used with great care; see the Guide to frames usage for some guidelines on suitable use of frames.

In a Frameset document, the outermost FRAMESET element takes the place of BODY and immediately follows the HEAD. Contained within the FRAMESET element are FRAME elements that define each frame, other FRAMESET elements for complex layouts, and a NOFRAMES element to provide alternate content for browsers with frames disabled or not supported.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Elements - Alphabetical List

HTML 4.0 Elements

The following is an alphabetical list of all HTML 4.0 elements. An organizational list is also available.

  • A - Anchor

  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • ADDRESS - Address
  • APPLET - Java applet
  • AREA - Image map region
  • B - Bold text
  • BASE - Document base url
  • BASEFONT - Base font change
  • BDO - BiDi override
  • BIG - Large text
  • BLOCKQUOTE - Block quotation
  • BODY - Document body
  • BR - Line break
  • BUTTON - Button
  • CAPTION - Table caption
  • CENTER - Centered block
  • CITE - Citation
  • CODE - Computer code
  • COL - Table column
  • COLGROUP - Table column group
  • DD - Definition description
  • DEL - Deleted text
  • DFN - Defined term
  • DIR - Directory list
  • DIV - Generic block-level container
  • DL - Definition list
  • DT - Definition term
  • EM - Emphasis
  • FIELDSET - Form control group
  • FONT - Font change
  • FORM - Interactive form
  • FRAME - Frame
  • FRAMESET - Frameset
  • H1 - Level-one heading
  • H2 - Level-two heading
  • H3 - Level-three heading
  • H4 - Level-four heading
  • H5 - Level-five heading
  • H6 - Level-six heading
  • HEAD - Document head
  • HR - Horizontal rule
  • HTML - HTML document
  • I - Italic text
  • IFRAME - Inline frame
  • IMG - Inline image
  • INPUT - Form input
  • INS - Inserted text
  • ISINDEX - Input prompt
  • KBD - Text to be input
  • LABEL - Form field label
  • LEGEND - Fieldset caption
  • LI - List item
  • LINK - Document relationship
  • MAP - Image map
  • MENU - Menu list
  • META - Metadata
  • NOFRAMES - Frames alternate content
  • NOSCRIPT - Alternate script content
  • OBJECT - Object
  • OL - Ordered list
  • OPTGROUP - Option group
  • OPTION - Menu option
  • P - Paragraph
  • PARAM - Object parameter
  • PRE - Preformatted text
  • Q - Short quotation
  • S - Strike-through text
  • SAMP - Sample output
  • SCRIPT - Client-side script
  • SELECT - Option selector
  • SMALL - Small text
  • SPAN - Generic inline container
  • STRIKE - Strike-through text
  • STRONG - Strong emphasis
  • STYLE - Embedded style sheet
  • SUB - Subscript
  • SUP - Superscript
  • TABLE - Table
  • TBODY - Table body
  • TD - Table data cell
  • TEXTAREA - Multi-line text input
  • TFOOT - Table foot
  • TH - Table header cell
  • THEAD - Table head
  • TITLE - Document title
  • TR - Table row
  • TT - Teletype text
  • U - Underlined text
  • UL - Unordered list
  • VAR - Variable

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Elements - Organizational List

HTML 4.0 Elements

The following is an organizational list of all HTML 4.0 elements. An alphabetical list is also available.

Top-level Elements

  • HTML - HTML document

    • HEAD - Document head
    • BODY - Document body
    • FRAMESET - Frameset

Head Elements

  • BASE - Document base url

  • ISINDEX - Input prompt
  • LINK - Document relationship
  • META - Metadata
  • SCRIPT - Client-side script
  • STYLE - Embedded style sheet
  • TITLE - Document title

Generic Block-level Elements

  • ADDRESS - Address

  • BLOCKQUOTE - Block quotation
  • CENTER - Centered block
  • DEL - Deleted text
  • DIV - Generic block-level container
  • H1 - Level-one heading
  • H2 - Level-two heading
  • H3 - Level-three heading
  • H4 - Level-four heading
  • H5 - Level-five heading
  • H6 - Level-six heading
  • HR - Horizontal rule
  • INS - Inserted text
  • ISINDEX - Input prompt
  • NOSCRIPT - Alternate script content
  • P - Paragraph
  • PRE - Preformatted text

Lists

  • DIR - Directory list

  • DL - Definition list
    • DT - Definition term
    • DD - Definition description
  • LI - List item
  • MENU - Menu list
  • OL - Ordered list
  • UL - Unordered list

Tables

  • TABLE - Table

    • CAPTION - Table caption
    • COLGROUP - Table column group
      • COL - Table column
    • THEAD - Table head
    • TFOOT - Table foot
    • TBODY - Table body
    • TR - Table row
      • TD - Table data cell
      • TH - Table header cell

Forms

  • FORM - Interactive form

    • BUTTON - Button
    • FIELDSET - Form control group
      • LEGEND - Fieldset caption
    • INPUT - Form input
    • LABEL - Form field label
    • SELECT - Option selector
      • OPTGROUP - Option group
        • OPTION - Menu option
    • TEXTAREA - Multi-line text input

Special Inline Elements

  • A - Anchor

  • APPLET - Java applet
  • BASEFONT - Base font change
  • BDO - BiDi override
  • BR - Line break
  • FONT - Font change
  • IFRAME - Inline frame
  • IMG - Inline image
  • MAP - Image map
    • AREA - Image map region
  • OBJECT - Object
  • PARAM - Object parameter
  • Q - Short quotation
  • SCRIPT - Client-side script
  • SPAN - Generic inline container
  • SUB - Subscript
  • SUP - Superscript

Phrase Elements

  • ABBR - Abbreviation

  • ACRONYM - Acronym
  • CITE - Citation
  • CODE - Computer code
  • DEL - Deleted text
  • DFN - Defined term
  • EM - Emphasis
  • INS - Inserted text
  • KBD - Text to be input
  • SAMP - Sample output
  • STRONG - Strong emphasis
  • VAR - Variable

Font Style Elements

  • B - Bold text

  • BIG - Large text
  • I - Italic text
  • S - Strike-through text
  • SMALL - Small text
  • STRIKE - Strike-through text
  • TT - Teletype text
  • U - Underlined text

Frames

  • FRAMESET - Frameset

    • FRAME - Frame
  • NOFRAMES - Frames alternate content

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Inline Elements

Most HTML 4.0 elements permitted within the BODY are classified as either block-level elements or inline elements. Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line.

The following are defined as inline elements in HTML 4.0:

  • A - Anchor
  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • B - Bold text
  • BASEFONT - Base font change
  • BDO - BiDi override
  • BIG - Large text
  • BR - Line break
  • CITE - Citation
  • CODE - Computer code
  • DFN - Defined term
  • EM - Emphasis
  • FONT - Font change
  • I - Italic text
  • IMG - Inline image
  • INPUT - Form input
  • KBD - Text to be input
  • LABEL - Form field label
  • Q - Short quotation
  • S - Strike-through text
  • SAMP - Sample output
  • SELECT - Option selector
  • SMALL - Small text
  • SPAN - Generic inline container
  • STRIKE - Strike-through text
  • STRONG - Strong emphasis
  • SUB - Subscript
  • SUP - Superscript
  • TEXTAREA - Multi-line text input
  • TT - Teletype text
  • U - Underlined text
  • VAR - Variable

The following elements may be used as either block-level elements or inline elements. If used as inline elements (e.g., within another inline element or a P), these elements should not contain any block-level elements.

  • APPLET - Java Applet
  • BUTTON - Button
  • DEL - Deleted text
  • IFRAME - Inline frame
  • INS - Inserted text
  • MAP - Image map
  • OBJECT - Object
  • SCRIPT - Client-side script

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML 4.0 Block-Level Elements

Most HTML 4.0 elements permitted within the BODY are classified as either block-level elements or inline elements. Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line.

The following are defined as block-level elements in HTML 4.0:

  • ADDRESS - Address

  • BLOCKQUOTE - Block quotation
  • CENTER - Centered block
  • DIR - Directory list
  • DIV - Generic block-level container
  • DL - Definition list
  • FIELDSET - Form control group
  • FORM - Interactive form
  • H1 - Level-one heading
  • H2 - Level-two heading
  • H3 - Level-three heading
  • H4 - Level-four heading
  • H5 - Level-five heading
  • H6 - Level-six heading
  • HR - Horizontal rule
  • ISINDEX - Input prompt
  • MENU - Menu list
  • NOFRAMES - Frames alternate content
  • NOSCRIPT - Alternate script content
  • OL - Ordered list
  • P - Paragraph
  • PRE - Preformatted text
  • TABLE - Table
  • UL - Unordered list

The following elements may also be considered block-level elements since they may contain block-level elements:

  • DD - Definition description

  • DT - Definition term
  • FRAMESET - Frameset
  • LI - List item
  • TBODY - Table body
  • TD - Table data cell
  • TFOOT - Table foot
  • TH - Table header cell
  • THEAD - Table head
  • TR - Table row

The following elements may be used as either block-level elements or inline elements. If used as inline elements (e.g., within another inline element or a P), these elements should not contain any block-level elements.

  • APPLET - Java applet

  • BUTTON - Button
  • DEL - Deleted text
  • IFRAME - Inline frame
  • INS - Inserted text
  • MAP - Image map
  • OBJECT - Object
  • SCRIPT - Client-side script

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


Netcape and Internet Explorer Elements

A number of elements that are not defined in HTML 4.0 are supported by HotDog's HTML Property Sheet, syntax highlighting and HTML Tags resource panel. These elements, commonly called "extensions", are listed below. Note that these elements, not being defined in any standard, are often only supported in one browser.

Internet Explorer Extensions

  • BGSOUND - Background Sound

  • LISTING - Font
  • MARQUEE - Scrolling Text
  • PLAINTEXT - Font
  • XMP - Font

Netscape Navigator Extensions

  • BLINK - Flashing Text

  • LAYER - Positioned HTML Content
  • ILAYER - Inline Layer
  • KEYGEN - Generate Key Material
  • MULTICOL - Multiple Column Formatting
  • NOEMBED - Alternative Text for Embedded Objects
  • NOLAYER - Alternative Text for Layers
  • SERVER - Server Side Script
  • SPACER - Extra Space

Common Internet Explorer and Netscape Navigator Elxtensions

  • EMBED - Embedded Plug-in

  • NOBR - No Break
  • WBR - Word Break


A - Anchor

Syntax
<A>...</A>

Attribute Specifications
[Key] [3.2] HREF=URL (hypertext reference)
[3.2] METHODS=list of HTTP Methods.
[Key] [3.2] NAME=CDATA (named link destination)
[3.2] REL=LinkTypes (relationship to link)
[3.2] REV=LinkTypes (relationship from link)
[3.2] SDAPREF
[3.2] TITLE
[3.2] URN
[3.2] TARGET=FrameTarget (frame to render link in)
[4.0] ACCESSKEY=Character (shortcut key)
[4.0] CHARSET=Charset (character encoding of link)
[4.0] CLASS
[4.0] COORDS
[4.0] DIR
[4.0] ID
[4.0] LANG
[4.0] SYSTEM EVENTS (ONCLICK etc.)
[4.0] SHAPE=[ rect | circle | poly | default ] (client-side image map)
[4.0] STYLE
[4.0] TABINDEX=Number (position in tabbing order)

Common Attributes

Can Contain:
Inline elements except A

Contained in:
Block-level elements, inline elements except A

Description

The A element denotes an anchor--a hypertext link or the destination of a link. The HREF attribute specifies a hypertext link to another resource, such as an HTML document or a JPEG image. Examples:
  • <A HREF="album.html">My photo album</A>
  • <A HREF="images/me.jpg">Picture of me</A>
  • <A HREF="/sounds/auldlang.mid" TYPE="audio/midi" ACCESSKEY=A>Auld Lang Syne (5 kB MIDI)</A>
  • <A HREF="section2.html" TARGET="content" TITLE="Elements of the HEAD" REL=next>Section 2</A>
  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www.htmlhelp.com/" TARGET="_top">Web Design Group</A>
  • <A HREF="http://babel.alis.com:8080/langues/iso639.zh.htm" CHARSET="big5" HREFLANG=zh>ISO 639</A>

[Key] [3.2] HREF

The value of the HREF attribute is the URL of the link. The TYPE attribute can be used to specify the Internet media type of the link, allowing browsers to avoid fetching a resource that they cannot handle.

[3.2] METHODS

"This is a comma separated list of HTTP methods supported by the linked object. The browser might choose a different way of rendering the link for say searchable objects." (HTML+).
METHODS is expected to be a white-space-separated list of HTTP methods supported by the object and accessible to the user. RFC 1866 suggests that the content of the anchor element may be rendered differently depending upon the HTTP method.
(From the HTML COMPENDIUM)

[Key] [3.2] NAME

NAME and ID values must be unique in any document, and different values must differ by more than just the case. Values must begin with a letter in the range A-Z or a-z, and may be followed by A-Z, a-z, 0-9, hyphens, underscores, colons, or periods. When linking to a named anchor, the name is treated as case sensitive.

[3.2] REL & REV

The REL and REV attributes define relationships between an anchor and the linked resource. REL defines a link relationship from the current document to the linked document while REV defines a relationship in the opposite direction. For example,

<A HREF="foo.html" REL=glossary>...</A>

indicates that foo.html is a glossary for the current document while

<A HREF="bar.html" REV=subsection>...</A>

indicates that the current document is a subsection of bar.html. The value of the REL and REV attributes is a space-separated list of link types.

[3.2] SDAPREF

Unknown at this time

[3.2] TITLE

The TITLE attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by some visual browsers. With mailto links, some browsers use the TITLE attribute value as a subject for the e-mail message.
Note: The content of an A element used as a link should be as context-free as possible. In other words, a user should be able to pull all A elements from a document and still have an idea what lies behind each link. Link text that contains Click here or simply here is extremely bad form.

[3.2] URN
Universal Resource Indicator. See the HTML Compendium for more details.

[3.2] TARGET

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window
[4.0] ACCESSKEY

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for following the link. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

[4.0] CHARSET

The CHARSET attribute defines the character set the borwser should use when rendering the page pointed to by by the link.

[4.0] CLASS

Used with Cascading Style Sheets. For more information, see the WDG help on Cascading Style Sheets. xxxx-->

[4.0] COORDS

The SHAPE and COORDS attributes of A can be used to create client-side image maps via the OBJECT element. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

  • default, which specifies the entire image;
  • circle, which specifies a circular region using COORDS="center-x, center-y, radius";
  • poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

In addition to the core events common to most elements, A accepts the following event attributes for client-side scripting:

[4.0] DIR

The DIR attribute value is one of LTR for left to right, or RTL for right to left, e.g. DIR=RTL. Currently this attribute is supported by niether Netscape or MS Internet Explorer.

[4.0] ID

The NAME attribute defines a destination for a link. For example, a document containing

<H1><A NAME=foo>My Heading</A></H1>

defines a link destination named "foo" at the indicated heading. One could then use HREF="#foo" in an A element within the same document or HREF="somedoc.html#foo" from within another document.

An A element cannot contain another A element, so one must be careful that named anchors do not contain link anchors. Authors can use both the NAME and HREF attributes in a single A element to avoid this problem.

HTML 4.0's ID attribute is intended to eliminate the need for A NAME. The ID attribute can be used with almost any element to define a link destination, so that the following could be used in place of the previous example:

<H1 ID=foo>My heading</H1>

However, browser support for ID link destinations is very poor, so A NAME will be needed for quite awhile.

[4.0] LANG

This attrbute describes the language and dialect that the text is written in. For example:

<tag lang="en-cockney"> or <tag lang="i-cherokee">

[4.0] SYSTEM EVENTS

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.
[4.0] SHAPE

The SHAPE and COORDS attributes of A can be used to create client-side image maps via the OBJECT element. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

  • default, which specifies the entire image;
  • circle, which specifies a circular region using COORDS="center-x, center-y, radius";
  • poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

In addition to the core events common to most elements, A accepts the following event attributes for client-side scripting:

[4.0] STYLE

One of several ways of using Cascading Style Sheets in your documents, the 'STYLE' attribute is used to set a previously defined style to a tag. For example:

<A STYLE="background-color:'lime'">

[4.0] TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. An anchor with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

More Information

  • A in W3C HTML 4.0 Recommendation
  • A in W3C HTML 3.2 Recommendation
  • A in HTML 2.0 Standard
  • A in WDG HTML 3.2 Reference
  • A in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


ABBR - Abbreviation

Syntax

<ABBR>...</ABBR>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The ABBR element is used to markup abbreviations. The TITLE attribute is useful in conjunction with ABBR to give the long form of the abbreviation, allowing visual browsers to provide the long form as a "tooltip". If the short form is a pronounceable word, the ACRONYM element should be used instead of ABBR.

Examples:

  • <ABBR TITLE="United Nations">U.N.</ABBR>
  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Some short forms, such as "SQL" and "URL," are pronounced as words by some but pronounced letter-by-letter by others. In such cases, the ABBR element should be favored over ACRONYM. A style sheet could be used to suggest the aural rendering. For example, one could use

<ABBR TITLE="Uniform Resource Locator">URL</ABBR>

with the following CSS2 style sheet:

abbr[title="Uniform Resource Locator"] { speak: spell-out }

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • ABBR in W3C HTML 4.0 Recommendation

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


ACRONYM - Acronym

Syntax

<ACRONYM>...</ACRONYM>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The ACRONYM element is used to markup acronyms. The TITLE attribute is useful in conjunction with ACRONYM to give the long form of the acronym, allowing visual browsers to provide the long form as a "tooltip". Examples:

  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

  • <ACRONYM TITLE="radio detecting and ranging">radar</ACRONYM>
  • <ABBR TITLE="Federal Bureau of Investigation">FBI</ABBR>

Unlike other kinds of abbreviations, acronyms are pronounceable words, though in some cases the pronunciation is strictly a presentation issue. For example, "SQL" and "URL" are pronounced as words by some people and pronounced letter-by-letter by others. In such cases, authors should use the ABBR element, possibly with a style sheet rule specifying the pronunciation for aural rendering.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

   <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
    | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
   SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT
    CLASSID="java:Yahtzee.class"
    CODETYPE="application/java" WIDTH=400 HEIGHT=250
    STANDBY="Ready to play Yahtzee?" TITLE="My
    Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • ACRONYM in W3C HTML 4.0 Recommendation

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


ADDRESS - Contact Information

Syntax

<ADDRESS>...</ADDRESS>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Can Contain
  • HTML 4.0 Strict: inline elements
  • HTML 4.0 Transitional: inline elements, P
Contained in:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The ADDRESS element provides contact information for a document or part of a document. Information provided by ADDRESS may include the names of the document's maintainers, links to the maintainers' Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The ADDRESS element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.

The following example, most appropriate at the end of a document, gives contact information about the maintainer:

<ADDRESS>Maintained by <A HREF="/%7Eliam/">Liam Quinn</A>
&lt;<A HREF="mailto:liam@htmlhelp.com">liam@htmlhelp.com</A>&gt;</ADDRESS>

ADDRESS can also be used to provide contact information for a portion of a document, typically a form. The next example gives users contact information to use in conjunction with an order form:

<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

  <FIELDSET>
    <LEGEND ACCESSKEY=C>Credit Card Information<BR></LEGEND>
    <P>
      <LABEL ACCESSKEY=V>
        <INPUT TYPE=radio NAME=card VALUE=visa> Visa
      </LABEL>
      <LABEL ACCESSKEY=M>
        <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=N>
        Number: <INPUT TYPE=text NAME=number>
      </LABEL>
      <LABEL ACCESSKEY=E>
        Expiry: <INPUT TYPE=text NAME=expiry>
      </LABEL>
    </P>
  </FIELDSET>

  <P>
    <INPUT TYPE=submit VALUE="Submit order" ACCESSKEY=S>
  </P>

  <ADDRESS>
    If you have any questions about ordering, contact us at
    <A HREF="mailto:orders@htmlhelp.com">orders@htmlhelp.com</A>,
    or phone our offices at 555-5555.
  </ADDRESS>

</FORM>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • ADDRESS in W3C HTML 4.0 Recommendation
  • ADDRESS in W3C HTML 3.2 Recommendation
  • ADDRESS in HTML 2.0 Standard
  • ADDRESS in WDG HTML 3.2 Reference
  • ADDRESS in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


APPLET - Java Applet

Syntax

<APPLET>...</APPLET>

Attribute Specifications

[3.2] ALT=Text (alternate text)
[3.2] CODE=CDATA (class file)
[3.2] CODEBASE=url (base url for class files)
[3.2] WIDTH=Length (applet width)
[3.2] HEIGHT=Length (applet height)
[3.2] HSPACE=Pixels (horizontal gutter)
[3.2] VSPACE=Pixels (vertical gutter)
[3.2] NAME=CDATA (name for inter-applet communication)
[Netscape] [3.2] ALIGN=[ top | middle | bottom | left | right ] (applet alignment)
[Netscape] ARCHIVE=CDATA (archive files)
[Netscape] MAYSCRIPT
[IE] DOWNLOAD
[4.0] OBJECT=CDATA (serialized applet)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Can Contain:

PARAM elements followed by block-level elements and/or inline elements

Contained in:

Inline elements, block-level elements except PRE

Description:

The APPLET element is used to embed Java applets. It has been deprecated in HTML 4.0 in favor of the more generalized OBJECT element. However, since the few browsers that support OBJECT do so with significant bugs, APPLET is currently a more reliable method of embedding Java applets.

An APPLET may contain PARAM elements to define applet-specific parameters. PARAM elements should be specified before any other content of the APPLET element. In the following example, a decorative Java applet takes two parameters. The APPLET contains an animated GIF as an alternative for non-Java browsers.

<APPLET CODE="Animate.class" WIDTH=100 HEIGHT=100>
<PARAM NAME=img1 VALUE="/images/1.jpg">
<PARAM NAME=img2 VALUE="/images/2.jpg">
<IMG SRC="animation.gif" ALT="" WIDTH=100 HEIGHT=100>
</APPLET>

[3.2] ALT

The ALT attribute can be used to give alternate text for browsers that recognize the APPLET element but do not support Java or do not have Java enabled. Authors can also give alternate content between the start and end tags of the APPLET element--a better method than using the ALT attribute since it allows authors to include HTML markup in the alternate content and also works with pre-HTML 3.2 browsers that do not support APPLET.

[3.2] CODE & CODEBASE

APPLET's CODE attribute specifies the name of the class file that contains the compiled Applet subclass. The value is relative to the url specified in the CODEBASE attribute, or to the HTML document's base url if the CODEBASE attribute is not given.

<APPLET CODE="Animate.class" WIDTH=100 HEIGHT=100>
<PARAM NAME=img1 VALUE="/images/1.jpg">
<PARAM NAME=img2 VALUE="/images/2.jpg">
<IMG SRC="animation.gif" ALT="" WIDTH=100 HEIGHT=100>
</APPLET>

[3.2] HEIGHT & WIDTH

The required WIDTH and HEIGHT attributes define the dimensions of the applet. The value may be given in pixels or as a percentage of the parent element's width or height.

[3.2] VSPACE & HSPACE

The HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the applet. The value must be in pixels and applies to both sides of the applet. Style sheets provide more flexibility in specifying the space around applets.

[3.2] NAME

"This attribute specifies a name for the applet instance, which makes it possible for applets on the same page to find (and communicate with) each other." (W3C)

[Netscape] ARCHIVE

The ARCHIVE attribute can specify a comma-separated list of archived files (either absolute urls or urls relative to the CODEBASE), allowing the browser to download many files with a single connection and hence decreasing the total download time. The standard archive format for Java files is JAR. JAR files can be created with the jar tool included with the Java Development Kit 1.1 and up.

Note that some browsers do not support the ARCHIVE attribute, so all necessary files should be available unarchived as well. Other browsers only support a single url as the ARCHIVE value.

[Netscape] MAYSCRIPT

"...permits the applet to access JavaScript. Use this attribute to determine whether or not an applet can access JavaScript on a page without your knowledge. Accessing JavaScript when the MAYSCRIPT attribute is not specified results in an exception." (Netscape 4.0)

[3.2] [Netscape] ALIGN

The ALIGN attribute specifies the alignment of the applet. The values top, middle, and bottom specify the applet's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the applet with the current baseline. To center the applet horizontally on the page, place the applet in a centered block, e.g.,

<P ALIGN=center><APPLET CODE="Game.class" WIDTH=300 HEIGHT=100></APPLET></P>

The other ALIGN values, left and right, specify a floating applet; the applet is placed at the left or right margin and content flows around it. To place content below the applet, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning applets.

[IE] DOWNLOAD

"Indicates the order of image download" Web TV 1.2 DTD.
It seems doubtful whether this attribute works under IE and Netscape.

[IE] OBJECT

The OBJECT attribute specifies a serialized (saved) representation of an applet. The CODE attribute should not be used if and only if the OBJECT attribute is specified. When the applet is deserialized, its init() method is not invoked, but its start() method is. Sun recommends restraint in using this poorly supported feature.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • APPLET in W3C HTML 4.0 Recommendation
  • APPLET in W3C HTML 3.2 Recommendation
  • APPLET in WDG HTML 3.2 Reference
  • APPLET in Learning HTML 3.2 by Examples
  • The APPLET Tag (JDK 1.1 Documentation)
  • The Java Tutorial
    • Using the <APPLET> Tag
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


AREA - Image Map Region

Syntax

<AREA>

Attribute Specifications

[3.2] SHAPE=[ rect | circle | poly | default ] (shape of region)
[3.2] ALT=Text (alternate text)
[3.2] COORDS=Coords (coordinates of region)
[3.2] HREF=url (linked resource)
[3.2] NOHREF (inactive region)
[4.0] TARGET=FrameTarget (frame to render link in)
[4.0] TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
[4.0] ONFOCUS=Script (region received focus)
[4.0] ONBLUR=Script (region lost focus)

Can Contain

Nothing

Contained in:

MAP

Description:

The AREA element defines a map region in a client-side image map. Each map region is a piece of the image with a different action when clicked.

[3.2] SHAPE & COORDS

The SHAPE and COORDS attributes of AREA specify what part of the image is included in the region. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

  • default, which specifies the entire image;
  • circle, which specifies a circular region using COORDS="center-x, center-y, radius";
  • poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

[3.2] HREF & NOHREF

The HREF attribute specifies a link to another resource, such as an HTML document or a JPEG image. The TITLE attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by some visual browsers. The boolean NOHREF attribute indicates that the region has no link.

[3.2] ALT

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the map region rather than a description of the region. For example, ALT="WDG Home" or ALT="Web Design Group" would be more appropriate than ALT="WDG Logo" for a map region whose link went to the WDG home page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images.

[4.0] TARGET

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window
[4.0] ACCESSKEY

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for following the link. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

[4.0] TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the map region. A region with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

In addition to the core events common to most elements, AREA accepts the following event attributes for client-side scripting:

  • ONFOCUS, when the region receives focus;
  • ONBLUR, when the region loses focus.

More Information

  • AREA in W3C HTML 4.0 Recommendation
  • AREA in W3C HTML 3.2 Recommendation
  • AREA in WDG HTML 3.2 Reference
  • AREA in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


B - Bold Text

Syntax

<B>...</B>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Can Contain

Inline elements

Contained in

Inline elements, block-level elements

Description

The B element suggests that text be rendered as bold text. In most cases, use of a phrase element such as STRONG is more appropriate since such elements express the meaning of the text more clearly.

The B element is a suitable choice for marking a structure for which no phrase element exists. For example, vectors in mathematics have no structural element in HTML 4.0, but bold text is often an appropriate visual rendering:

If two vectors <B CLASS=vector>v</B> and <B CLASS=vector>w</B> are orthogonal, we write <B CLASS=vector>v</B> &perp; <B CLASS=vector>w</B>.

Note the use of the CLASS attribute to add structural significance to the B elements. This allows greater flexibility when applying style sheets to different kinds of bold text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • B in W3C HTML 4.0 Recommendation
  • B in W3C HTML 3.2 Recommendation
  • B in HTML 2.0 Standard
  • B in WDG HTML 3.2 Reference
  • B in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BASE - Document Base url

Syntax

<BASE>

Attribute Specifications

[3.2] HREF=url (base url reference)
[4.0] TARGET=FrameTarget (frame to render links in)

Contained in

HEAD

Description

The BASE element defines the document's base url for resolving relative urls contained within the document. A document cannot contain more than one BASE element. When present, the BASE element must appear in the HEAD, prior to any elements that include a partial url.

[3.2] HREF

BASE's HREF attribute, required in HTML 4.0 Strict, specifies the absolute url used to resolve relative urls. See Using Relative URLs for more details on using and resolving relative urls.

Most Web pages do not require an explicit base url since the document's url is a suitable base. An explicit base url is only required when the same document may be accessed at different urls or when the document has no url (e.g., sending an HTML document by e-mail).

[4.0] TARGET

The TARGET attribute is used with frames to specify in which frame all links in document should be rendered by default. The target frame specified by BASE can be overridden by a given link using the link's TARGET attribute.

If no frame with the specified target name exists, the links are rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the links in a new, unnamed window
  • _self renders the links in the current frame
  • _parent renders the links in the immediate FRAMESET parent
  • _top renders the links in the full, unframed window

More Information

  • BASE in W3C HTML 4.0 Recommendation
  • BASE in W3C HTML 3.2 Recommendation
  • BASE in HTML 2.0 Standard
  • BASE in WDG HTML 3.2 Reference
  • BASE in Learning HTML 3.2 by Examples
  • RFC 1808: Relative Uniform Resource Locators
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BASEFONT - Base Font Change

Syntax

<BASEFONT>

Attribute Specifications

[3.2] COLOR=Color (font color adjustment)
[3.2] SIZE=CDATA (font size adjustment)
[4.0] FACE=CDATA (font face adjustment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] LANG=Language (i.e. RU - Russian)

Contents

Empty

Contained in

Inline elements, block-level elements except PRE

Description

The BASEFONT element, deprecated in HTML 4.0 in favor of style sheets, allows authors to suggest rudimentary font changes. Use of the BASEFONT element brings the same usability and accessibility problems as FONT, as discussed in the article What's Wrong With FONT?

Unlike FONT, BASEFONT's changes affect the base font, and so apply to all content following the BASEFONT element except for headings. However, most browsers fail to apply changes in the base font size and color to TABLEs.

[3.2] SIZE

BASEFONT's required SIZE attribute specifies the font size to use on a browser-dependent scale of 1 to 7, with the default being 3.

[3.2] COLOR & FACE

The poorly supported COLOR and FACE attributes suggest a font color and face, respectively. Style sheets are better supported and more flexible than BASEFONT's COLOR and FACE attributes.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

More Information

  • BASEFONT in W3C HTML 4.0 Recommendation
  • BASEFONT in W3C HTML 3.2 Recommendation
  • BASEFONT in WDG HTML 3.2 Reference
  • BASEFONT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BDO - BiDi Override

Syntax

<BDO>...</BDO>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in
Inline elements, block-level elements
Description

The BDO element overrides the bidirectional algorithm for the enclosed text. Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, occasionally authors must override the bidirectional algorithm and specify the directionality of the text. One such case is when Hebrew characters are stored in visual order, where the first character of a word is after the second character. Unicode assumes that the characters are stored in logical order, where the first character of a word is before the second character, so the bidirectional algorithm would result in a rendering with the first character incorrectly to the left of the second character.

The BDO element requires the DIR attribute to specify the directionality of the enclosed text. If a document contains Hebrew characters stored in visual order, one should use <BDO DIR=ltr>text</BDO> to force the proper presentation for that text.

Authors may alternatively override the bidirectional algorithm using the Unicode character &#x202D; to force left-to-right directionality or &#x202E; to force right-to-left directionality. The character &#x202C; ends the overriding of the algorithm. These characters should not be used in combination with the DIR attribute.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BDO in W3C HTML 4.0 Recommendation
  • Introduction to the bidirectional algorithm
  • Unicode
  • Middle Eastern Language Issues
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BIG - Large Font

Syntax

<BIG>...</BIG>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements except PRE

Description

The BIG element suggests that text be rendered in a larger font. In most cases, use of a structural element such as STRONG or a heading (e.g., H3) is more appropriate since these elements express the meaning of the text more clearly. One can suggest that STRONG text be rendered in a larger font with the following Cascading Style Sheet:

STRONG { font-size: larger }

Most browsers support nested BIG elements, but authors should be wary of making significant changes to the font size. Different users have different font sizes, eyesight, and window sizes. Large changes in font size may look right to the author but ridiculous to some users.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BIG in W3C HTML 4.0 Recommendation
  • BIG in W3C HTML 3.2 Recommendation
  • BIG in WDG HTML 3.2 Reference
  • BIG in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BLOCKQUOTE - Block Quotation

Syntax

<BLOCKQUOTE>...</BLOCKQUOTE>

Attribute Specifications

[4.0] CITE=url (source of quotation)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

  • In HTML 4.0 Strict: one or more block-level elements or SCRIPT
  • In HTML 4.0 Transitional: inline elements or block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The BLOCKQUOTE element defines a block quotation. Unlike inline quotations, block quotations may contain block-level elements such as P and TABLE, but BLOCKQUOTE may not be contained within a paragraph or inline element.

[4.0] CITE

The optional CITE attribute of BLOCKQUOTE provides the url of the source of the quotation. This attribute, not widely supported among browsers, allows readers to verify the authenticity of the quotation and also find related information.

The content of the BLOCKQUOTE element should be contained within other block-level elements, typically P. The following example features a quotation that includes multiple paragraphs and its own block quotation:

<BLOCKQUOTE CITE="http://www.bibliomania.com/Fiction/joyce/ulysses/telemac.html">
<P>He pointed his finger in friendly jest and went over to the parapet, laughing to himself. Stephen Dedalus stepped up, followed him wearily half way and sat down on the edge of the gunrest, watching him still as he propped his mirror on the parapet, dipped the brush in the bowl and lathered cheeks and neck.</P>
<P>Buck Mulligan's gay voice went on.</P>
<BLOCKQUOTE><P>My name is absurd too: Malachi Mulligan, two dactyls. But it has a Hellenic ring, hasn't it? Tripping and sunny like the buck himself. We must go to Athens. Will you come if I can get the aunt to fork out twenty quid?</P></BLOCKQUOTE>
</BLOCKQUOTE>

Authors should not use BLOCKQUOTE for unquoted material just to achieve a block indentation in common visual browsers. With the rise of style sheets, such misuse of BLOCKQUOTE will become less reliable while also reducing the author's ability to fully exploit the power of style sheets. Cascading Style Sheets provide the margin-left property to indent a block.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BLOCKQUOTE in W3C HTML 4.0 Recommendation
  • BLOCKQUOTE in W3C HTML 3.2 Recommendation
  • BLOCKQUOTE in HTML 2.0 Standard
  • BLOCKQUOTE in WDG HTML 3.2 Reference
  • BLOCKQUOTE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BODY - Document Body

Syntax

<BODY>...</BODY>

Attribute Specifications

[3.2] BACKGROUND=url (background image for document)
[3.2] BGCOLOR=Color (background color for document)
[3.2] TEXT=Color (text color for document)
[3.2] LINK=Color (link color for document)
[3.2] VLINK=Color (visited link color for document)
[3.2] ALINK=Color (active link color for document)
[4.0] Script (document has been loaded)
[4.0] Script (document has been exited)
[IE] LEFTMARGIN=Pixels (Sets the left margin of the web page)
[IE] RIGHTMARGIN=Pixels (Sets the right margin of the web page)
[IE] TOPMARGIN=Pixels (Sets the top margin of the web page)
[IE] BOTTOMMARGIN=Pixels (Sets the bottom margin of the web page)
[IE] BGPROPERTIES=[FIXED] (Sets the Background property to fixed or scrolling)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

  • In HTML 4.0 Strict: one or more block-level elements or SCRIPT, INS, DEL
  • In HTML 4.0 Transitional: inline elements, block-level elements, INS, DEL

Contained in

  • In HTML 4.0 Strict or Transitional: HTML
  • In HTML 4.0 Frameset: NOFRAMES

Description

The BODY element contains the document body. BODY is required in non-frames documents, but its start and end tags are always optional. In frames documents, BODY must be contained within the NOFRAMES element, if NOFRAMES is used.

The BODY element contains the document's content. The content should be contained within block-level elements or SCRIPT elements, though HTML 4.0 Transitional also allows inline elements directly within BODY.

[3.2] BGCOLOR, ALINK, VLINK, TEXT & LINK

BODY takes a number of attributes for specifying the background and colors of the document on visual browsers. These attributes are deprecated in HTML 4.0 in favor of style sheets, which provide greater flexibility in suggesting the presentation of a document. BGCOLOR suggests a background color, TEXT suggests a text color, LINK suggests a link color, VLINK suggests a visited link color, and ACTIVE suggests an active link color (when the link is selected). If one of these attributes is given, then all of them should be included to ensure that the user's chosen colors do not interfere with those suggested in the <BODY> tag. Authors should not rely on the specified colors being used since browsers allow these colors to be overridden by the user.

[3.2] BACKGROUND

The BACKGROUND attribute suggests a background image for tiling on the document canvas. To help ensure a readable document, the BGCOLOR, TEXT, LINK, VLINK, and ALINK attributes should always be included when BACKGROUND is given. The BGCOLOR will be used for those not loading images.

Style sheets allow more flexibility in suggesting a background image, including the ability to specify the position of the image, how the image is tiled, and whether the image should scroll with the document.

In addition to the core events common to most elements, BODY accepts the following event attributes for client-side scripting:

  • ONLOAD, when the document has been loaded;
  • ONUNLOAD, when the document is exited.

[IE] TOP, LEFT, RIGHT, BOTTOMMARGIN

Each margin respectivly sets a border from which the web page is rendered. For example, setting all borders to 20 pixels would result in the entire web page being rendered with a 20 pixel border or buffer surrounding it.

[IE] BGPROPERTIES

Setting this attribute to "fixed" causes the background graphic to not scroll with the foreground text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BODY in W3C HTML 4.0 Recommendation
  • BODY in W3C HTML 3.2 Recommendation
  • BODY in HTML 2.0 Standard
  • BODY in WDG HTML 3.2 Reference
  • BODY in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BR - Line Break

Syntax

<BR>

Attribute Specifications

[3.2] CLEAR=[ left | all | right | none ] (clear floating objects)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

Inline elements, block-level elements

Description

The BR element forces a break in the current line of text. BR can be useful in formatting addresses within the ADDRESS element, but it is often misused to break lines of text in a paragraph or table cell when it looks "nice" to the author. This usually results in an awkward presentation when viewed with a font size other than that used by the author.

[3.2] CLEAR

The CLEAR attribute of BR is used to move below floating objects (typically images or tables). In the following example, the second paragraph should be rendered below the floating image:

<P><IMG SRC="toronto.jpg" ALIGN=left ALT="" TITLE="Toronto's CN Tower">Toronto is the largest city in Canada and the fourth largest in North America.</P>
<BR CLEAR=left>
<P>The city is highly multicultural, with over 80 ethnic communities from Africa, Asia, and Europe...

Style sheets provide more flexibility in controlling text flow around objects and eliminate the need to use BR for this purpose since CSS1's clear property can be applied to any element (such as the second paragraph in the preceding example).

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BR in W3C HTML 4.0 Recommendation
  • BR in W3C HTML 3.2 Recommendation
  • BR in HTML 2.0 Standard
  • BR in WDG HTML 3.2 Reference
  • BR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


BUTTON - Button

Syntax

<BUTTON>...</BUTTON>

Attribute Specifications

[4.0] NAME=CDATA (key in submitted form)
[4.0] VALUE=CDATA (value in submitted form)
[4.0] TYPE=[ submit | reset | button ] (type of button)
[4.0] DISABLED (disable button)
[4.0] ACCESSKEY=Character (shortcut key)
[4.0] TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
[4.0] ONFOCUS=Script (element received focus)
[4.0] ONBLUR=Script (element lost focus)

Contents

  • Inline elements except A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, and IFRAME
  • Block-level elements except FORM, ISINDEX, and FIELDSET

Contained in

Block-level elements, inline elements except BUTTON.

Description

The BUTTON element defines a submit button, reset button, or push button. Authors can also use INPUT to specify these buttons, but the BUTTON element allows richer labels, including images and emphasis. However, BUTTON is new in HTML 4.0 and poorly supported among current browsers, so INPUT is a more reliable choice at this time.

[4.0] TYPE

The TYPE attribute of BUTTON specifies the kind of button and takes the value submit (the default), reset, or button.

[4.0] NAME & VALUE

The NAME and VALUE attributes determine the name/value pair sent to the server when a submit button is pushed. These attributes allow authors to provide multiple submit buttons and have the form handler take a different action depending on the submit button used.

Some examples of BUTTON follow:

  • <BUTTON NAME=submit VALUE=modify ACCESSKEY=M>Modify information</BUTTON>
    <BUTTON NAME=submit VALUE=continue ACCESSKEY=C>Continue with application</BUTTON>
  • <BUTTON ACCESSKEY=S>Submit <IMG SRC="checkmark.gif" ALT="&#10004;"></BUTTON>
    <BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif" ALT="&#10008;"></BUTTON>
  • <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide <strong>non-strict</strong> attributes</BUTTON>
[4.0] ACCESSKEY

The ACCESSKEY attribute, used throughout the preceding examples, specifies a single Unicode character as a shortcut key for pressing the button. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

[4.0] DISABLED

The boolean DISABLED attribute makes the BUTTON element unavailable. The user is unable to push the button, the button cannot receive focus, and the button is skipped when navigating the document by tabbing.

[4.0] TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the button. A BUTTON element with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.
[4.0] ONFOCUS & ONBLUR

The BUTTON element also takes a number of attributes to specify client-side scripting actions for various events.

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus.

More Information

  • BUTTON in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


CAPTION - Table Caption

Syntax

<CAPTION>...</CAPTION>

Attribute Specifications

[3.2] ALIGN=[ top | bottom | left | right ] (caption alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

TABLE

Description

The CAPTION element defines a table caption. When used, CAPTION must be the first element in the TABLE. Only inline elements (e.g., STRONG) may be used within CAPTION.

A good caption should provide a short heading for the table. For simple tables, the caption can also act as an adequate summary, but for more complex tables, authors should supplement the CAPTION with a full summary, either through TABLE's SUMMARY attribute or within a paragraph outside of the TABLE. The following example features a simple table where the CAPTION provides a heading and an adequate table summary:

<TABLE>
  <CAPTION>Common Usenet Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Abbreviation</TH>
      <TH>Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>

The next example uses TABLE's SUMMARY attribute to complement the CAPTION:

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for symbols and Greek letters.">
  <CAPTION>Symbols and Greek Letters in HTML 4.0</CAPTION>
  <COLGROUP>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col>Character</TH>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>Latin small f with hook</TD>
      <TD>&amp;fnof;</TD>
      <TD>&amp;#402;</TD>
      <TD>&amp;#x192;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

[3.2] ALIGN

The deprecated ALIGN attribute of CAPTION specifies the alignment of the caption relative to the table. Possible values are top (the default), bottom, left, and right.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • CAPTION in W3C HTML 4.0 Recommendation
  • CAPTION in W3C HTML 3.2 Recommendation
  • CAPTION in WDG HTML 3.2 Reference
  • CAPTION in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


CENTER - Centered Block

Syntax

<CENTER>...</CENTER>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The CENTER element defines a block whose contents are centered horizontally on visual browsers. <CENTER> is a shorthand for <DIV ALIGN=center>, though CENTER is slightly better supported among browsers. Both methods of centering are deprecated in favor of style sheets.

CENTER is still useful for centering tables since many browsers lack support for <TABLE ALIGN=center> as well as the method of centering tables with Cascading Style Sheets (setting margin-left and margin-right to auto). An example follows:

<CENTER>
  <TABLE>
    <TR ALIGN=center>
      <TH SCOPE=col>Name</TH>
      <TH SCOPE=col>Age</TH>
      <TH SCOPE=col>Country</TH>
    </TR>
    <TR ALIGN=center>
      <TD>Liam Quinn</TD>
      <TD>20</TD>
      <TD>Canada</TD>
    </TR>
  </TABLE>
</CENTER>

Note that CENTER only centers the table as a whole, not the contents of each table cell. The preceding example uses the ALIGN attribute of TR to center the contents of each cell. The text-align property of Cascading Style Sheets provides greater flexibility in suggesting horizontal alignment.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • CENTER in W3C HTML 4.0 Recommendation
  • CENTER in W3C HTML 3.2 Recommendation
  • CENTER in WDG HTML 3.2 Reference
  • CENTER in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


CITE - Citation

Syntax

<CITE>...</CITE>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The CITE element is used to markup citations, such as titles of magazines or newspapers, ship names, references to other sources, and quotation attributions. Visual browsers typically render CITE as italic text, but authors can suggest a rendering using style sheets. Since CITE is a structural element, it carries meaning, making it preferable to font style elements such as I when marking up citations.

Example:

<CITE>The Toronto Star</CITE> gave its review of the movie <CITE>Titanic</CITE> yesterday.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • CITE in W3C HTML 4.0 Recommendation
  • CITE in W3C HTML 3.2 Recommendation
  • CITE in HTML 2.0 Standard
  • CITE in WDG HTML 3.2 Reference
  • CITE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


CODE - Computer Code

Syntax

<CODE>...</CODE>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The CODE element denotes computer code. Visual browsers typically render CODE as monospaced text, but authors can suggest a rendering using style sheets. Since CODE is a structural element, it carries meaning, making it preferable to font style elements such as TT when marking up computer code.

Since spacing is often important when presenting computer code, the PRE element can be useful as a container for CODE elements. When used within other containers, a CODE element has multiple spaces collapsed. The following example uses CODE within PRE:

<PRE><CODE>
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}
</CODE></PRE>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • CODE in W3C HTML 4.0 Recommendation
  • CODE in W3C HTML 3.2 Recommendation
  • CODE in HTML 2.0 Standard
  • CODE in WDG HTML 3.2 Reference
  • CODE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


COL - Table Column

Syntax

<COL>

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells)
[4.0] VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells)
[4.0] SPAN=Number (number of columns)
[4.0] WIDTH=MultiLength (width of each column)
[4.0] CHAR=Character (alignment character for cells)
[4.0] CHAROFF=Length (alignment character offset)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

COLGROUP, TABLE

Description

The COL element defines attributes common to a table column. If used, COL must be after the optional CAPTION and before the optional THEAD in the TABLE. Unlike COLGROUP, COL does not group columns structurally; it merely defines attributes common to all cells in one or more columns.

COL also takes a number of presentational attributes, many of which cannot be completely replaced by style sheets. Since few browsers support COL, authors may wish to specify these attributes on the TD or TH elements instead.

[4.0] SPAN

COL's SPAN attribute defines the number of columns that will share the COL element's other attributes; the default value is 1. COL may be contained directly in the TABLE element or it may be contained within a COLGROUP. If COL is in a COLGROUP, the COL's attributes override those of the COLGROUP for the columns spanned by COL.

Example

The next example uses COL elements within COLGROUPs to assign a different CLASS to each column:

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for 8-bit Latin-1 characters, as well as the
                rendering of each in your browser.">
  <COLGROUP CLASS="character-description">
  <COLGROUP>
    <COL CLASS=entity>
    <COL SPAN=2 CLASS=numeric>
  <COLGROUP>
    <COL CLASS="entity-rendering">
    <COL CLASS="decimal-rendering">
    <COL CLASS="hex-rendering">
  <THEAD>
    <TR>
      <TH SCOPE=col ROWSPAN=2>Character</TH>
      <TH SCOPE=col ROWSPAN=2>Entity</TH>
      <TH SCOPE=col ROWSPAN=2>Decimal</TH>
      <TH SCOPE=col ROWSPAN=2>Hex</TH>
      <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>
    </TR>
    <TR>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>non-breaking space</TD>
      <TD>&amp;nbsp;</TD>
      <TD>&amp;#160;</TD>
      <TD>&amp;#xA0;</TD>
      <TD>&nbsp;</TD>
      <TD>&#160;</TD>
      <TD>&#xA0;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

[4.0] WIDTH

The WIDTH attribute specifies a width for each column spanned by COL. The value must be a number in pixels, a percentage of the table width, or a relative length expressed as i* where i is an integer. A column with WIDTH="3*" will be allotted three times the width of a column with WIDTH="1*". The value 0* is equivalent to the minimum width necessary for the column's contents.

[3.2] ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the spanned columns. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

[4.0] VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • COL in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


COLGROUP - Table Column Group

Syntax

<COLGROUP>...</COLGROUP>

Attribute Specifications

[4.0] [IE] SPAN=Number (number of columns in group)
[4.0] [IE] WIDTH=MultiLength (width of each column)
[4.0] [IE] ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
[4.0] [IE] CHAR=Character (alignment character for cells)
[4.0] [IE] CHAROFF=Length (alignment character offset)
[4.0] [IE] VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Zero or more COL elements

Contained in

TABLE

Description

The COLGROUP element defines a column group in a table. If used, COLGROUP must be after the optional CAPTION and before the optional THEAD in the TABLE. The structural divisions defined by COLGROUP allow authors to easily suggest a presentation for groups of columns through style sheets.

[4.0] [IE] SPAN

COLGROUP's SPAN attribute defines the number of columns in the group; the default value is 1. A number of other attributes are permitted on COLGROUP, and these are shared among the cells of the group. COLGROUP may contain COL elements that define attributes for the cells of individual columns, overriding attributes defined for the column group. The SPAN attribute should not be used if the COLGROUP contains any COL elements.

Example

The next example features three column groups to structurally divide the table into three parts. The first part is a single column that gives the description of a character. The second part consists of three columns giving different ways of representing the character in HTML. The third part consists of three columns with renderings of the character in the user's browser.

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for 8-bit Latin-1 characters, as well as the
                rendering of each in your browser.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col ROWSPAN=2>Character</TH>
      <TH SCOPE=col ROWSPAN=2>Entity</TH>
      <TH SCOPE=col ROWSPAN=2>Decimal</TH>
      <TH SCOPE=col ROWSPAN=2>Hex</TH>
      <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>
    </TR>
    <TR>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>non-breaking space</TD>
      <TD>&amp;nbsp;</TD>
      <TD>&amp;#160;</TD>
      <TD>&amp;#xA0;</TD>
      <TD>&nbsp;</TD>
      <TD>&#160;</TD>
      <TD>&#xA0;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In place of the <COLGROUP SPAN=3> tag in the preceding example, a COLGROUP with three COL elements could have been used:

<COLGROUP>
  <COL CLASS=entity>
  <COL CLASS=decimal>
  <COL CLASS=hex>
</COLGROUP>

Here we have used the CLASS attribute to distinguish the individual columns of the group, allowing us to easily suggest different presentations for the columns through style sheets.

COLGROUP also takes a number of presentational attributes, many of which cannot be completely replaced by style sheets. Since few browsers support COLGROUP, authors may wish to specify these attributes on the TD or TH elements instead.

[4.0] [IE] WIDTH

The WIDTH attribute specifies a width for each column in the group. The value must be a number in pixels, a percentage of the table width, or a relative length expressed as i* where i is an integer. A column with WIDTH="3*" will be allotted three times the width of a column with WIDTH="1*". The value 0* is equivalent to the minimum width necessary for the column's contents.

[4.0] [IE] ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the column group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

[4.0] [IE] VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • COLGROUP in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DD - Definition Description

Syntax

<DD>...</DD>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

DL

Description

The DD element provides the definition of a term in a definition list. The closing tag for DD is optional, but its use prevents common browser bugs with style sheets.

DD may contain block-level elements such as P, H2, TABLE, and DL. This allows definition lists to be nested, as in the following example:

Example

<DL>

  <DT><A NAME="spanning-tree">Spanning tree</A></DT>
  <DD>
    <P>
      A spanning tree of a graph is a <A HREF="#tree">tree</A>
      that contains all the vertices of the graph. There are two
      main types of spanning trees:
    </P>

    <DL>
      <DT>BFS spanning tree</DT>
      <DD>
        A spanning tree formed by a breadth-first search on the graph.
      </DD>
      <DT>DFS spanning tree</DT>
      <DD>
        A spanning tree formed by a depth-first search on the graph.
      </DD>
    </DL>
  </DD>

  <DT><A NAME=tree>Tree</A></DT>
  <DD>
    <P>
      A tree is a connected, undirected graph without cycles.
    </P>
  </DD>

</DL>

A DD element should generally be preceded by a DT element that gives the term defined by the DD. A single definition term may have multiple definitions associated with it, and a single definition may have multiple terms.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DD in W3C HTML 4.0 Recommendation
  • DD in W3C HTML 3.2 Recommendation
  • DD in HTML 2.0 Standard
  • DD in WDG HTML 3.2 Reference
  • DD in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DEL - Deleted Text

Syntax

<DEL>...</DEL>

Attribute Specifications

[4.0] CITE=url (reason for deletion)
[4.0] DATETIME=Datetime (date and time of deletion)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

Inline elements, block-level elements

Description

The DEL element contains content that has been deleted. This element is useful in marking changes from one version of a document to the next. Through style sheets, authors can suggest an appropriate rendering, such as not displaying the deleted content or rendering the text with a strike-through style.

DEL may be used as either a block-level element or an inline element. If used as an inline element (e.g., within a P), then DEL may not contain any block-level elements.

[4.0] CITE

The optional CITE attribute of DEL gives a url with information on why the content was deleted. A brief explanation for the deletion can be given with the TITLE attribute, which may be rendered as a "tooltip" by some browsers.

[4.0] DATETIME

The optional DATETIME attribute specifies the date and time of the deletion. The value is case-sensitive and of the form YYYY-MM-DDThh:mm:ssTZD. See the values section for a full explanation of this format.

Example

<DEL CITE="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.1.3" DATETIME="1997-12-19T00:00:00-05:00" TITLE="XMP is obsolete"><P>The XMP element contains preformatted text in which markup other than an end tag is treated as literal text.</P></DEL>

Since DEL is poorly supported among browsers, authors may wish to use a font style element such as STRIKE (deprecated in HTML 4.0) to attempt to convey the meaning of DEL to non-supporting visual browsers. The previous example could also be marked up as follows:

<DEL CITE="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.1.3" DATETIME="1997-12-19T00:00:00-05:00" TITLE="XMP is obsolete"><P><STRIKE>The XMP element is used for preformatted text in which markup other than an end tag is treated as literal text.</STRIKE></P></DEL>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DEL in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DFN - Defined Term

Syntax

<DFN>...</DFN>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The DFN element denotes the defining instance of a term. Visual browsers typically render DFN as italic text, but authors can suggest a rendering using style sheets. Since DFN is a structural element, it carries meaning, making it preferable to font style elements such as I when marking up the defining instance of a term.

Netscape Navigator does not support the DFN element. In most cases, the lack of support is not a significant problem; concerned authors could nest the DFN element within an I element or another font style element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DFN in W3C HTML 4.0 Recommendation
  • DFN in W3C HTML 3.2 Recommendation
  • DFN in WDG HTML 3.2 Reference
  • DFN in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DIR - Directory List

Syntax

<DIR>...</DIR>

Attribute Specifications

[3.2] [IE] [Netscape] COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements that cannot contain block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The DIR element defines a directory list. The element contains one or more LI elements that define the actual items of the list. The LI elements must not contain block-level elements, which prevents DIRs from being nested.

[3.2] [IE] [Netscape] COMPACT

The COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

DIR is deprecated in HTML 4.0 in favor of UL.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DIR in W3C HTML 4.0 Recommendation
  • DIR in W3C HTML 3.2 Recommendation
  • DIR in HTML 2.0 Standard
  • DIR in WDG HTML 3.2 Reference
  • DIR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DIV - Generic Block-level Container

Syntax

<DIV>...</DIV>

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.

The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the content of the division on visual browsers. Possible values are left, right, center, and justify. <CENTER> is a slightly better-supported alias for <DIV ALIGN=center>, though both methods of centering are deprecated in favor of style sheets, which provide greater flexibility in suggesting alignment.

SPAN is a text-level equivalent of DIV for use within paragraphs and inline elements.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DIV in W3C HTML 4.0 Recommendation
  • DIV in W3C HTML 3.2 Recommendation
  • DIV in WDG HTML 3.2 Reference
  • DIV in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DL - Definition List

Syntax

<DL>...</DL>

Attribute Specifications

[4.0] COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more DT or DD elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The DL element defines a definition list. An entry in the list is created using the DT element for the term being defined and the DD element for the definition of the term.

A definition list can have multiple terms for a given definition as well as multiple definitions for a given term. Authors can also give a term without a corresponding definition, and vice versa, but such a structure rarely makes sense.

An example follows:

<DL>

  <DT>Block-level elements</DT>
  <DD>
    <P>
      In HTML, block-level elements may generally contain
      inline elements and other block-level elements. They are
      usually formatted differently than inline elements,
      typically on a new line in visual browsers.
    </P>
  </DD>

  <DT>Inline elements</DT>
  <DT>Text-level elements</DT>
  <DD>
    <P>
      Inline (or text-level) elements generally only contain
      character data and other inline elements.
    </P>
  </DD>

</DL>

The DL element can be adapted for use with structures that are not strict terms and definitions, a practice that is justified when other HTML elements cannot adequately describe a structure. Some examples follow:

  • <H1>Community Calendar</H1>

<DL CLASS=calendar>

  <DT>March 8</DT>
  <DD>
    The Symphony Orchestra presents <CITE>A Rising Star</CITE>
    at the Anderson Center. Call 555-1234 for details.
  </DD>

  <DT>March 10</DT>
  <DD>
    Bereaved Families Support Night, 7:00 to 9:00 at
    523 Main <ABBR TITLE=Street>St.</ABBR>
  </DD>

</DL>
  • <DL CLASS=play>

  <DT>Brutus</DT>
  <DD CLASS="role Brutus">
    <P>
      I kiss thy hand, but not in flattery, Caesar;<BR>
      Desiring thee that Publius Cimber may<BR>
      Have an immediate freedom of repeal.
    </P>
  </DD>

  <DT>Caesar</DT>
  <DD CLASS="role Caesar">
    <P>
      What, Brutus!
    </P>
  </DD>

  <DT>Cassius</DT>
  <DD CLASS="role Cassius">
    <P>
      Pardon, Caesar; Caesar, pardon:<BR>
      As low as to thy foot doth Cassius fall,<BR>
      To beg enfranchisement for Publius Cimber.
    </P>
  </DD>

</DL>

Note the use of the CLASS attribute in the preceding examples. This allows the author to easily suggest, through style sheets, a distinguishing presentation for different kinds of definition lists.

[4.0] COMPACT

In addition to the common attributes shared by most elements, DL takes a COMPACT attribute. This attribute, deprecated in HTML 4.0 and poorly supported among browsers, suggests that visual browsers render the list compactly, perhaps with reduced spacing between items.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DL in W3C HTML 4.0 Recommendation
  • DL in W3C HTML 3.2 Recommendation
  • DL in HTML 2.0 Standard
  • DL in WDG HTML 3.2 Reference
  • UL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


DT - Definition Term

Syntax

<DT>...</DT>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

DL

Description

The DT element defines a term in a definition list. The closing tag for DT is optional, but its use prevents common browser bugs with style sheets. Note that DT cannot contain block-level elements such as P and H2.

A DT element should generally be followed by a DD element that provides the definition for the term given by the DT. A single definition term may have multiple definitions associated with it, and a single definition may have multiple terms.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DT in W3C HTML 4.0 Recommendation
  • DT in W3C HTML 3.2 Recommendation
  • DT in HTML 2.0 Standard
  • DT in WDG HTML 3.2 Reference
  • DT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


EM - Emphasis

Syntax

<EM>...</EM>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The EM element gives emphasis to its contents. Visual browsers typically render EM as italic text, but authors can suggest a rendering using style sheets. Since EM is a structural element, it carries meaning, making it preferable to font style elements such as I when emphasis is the intended meaning.

For strong emphasis, use the STRONG element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • EM in W3C HTML 4.0 Recommendation
  • EM in W3C HTML 3.2 Recommendation
  • EM in HTML 2.0 Standard
  • EM in WDG HTML 3.2 Reference
  • EM in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


FIELDSET - Form Control Group

Syntax

<FIELDSET>...</FIELDSET>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

A LEGEND element followed by zero or more block-level elements and inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The FIELDSET element defines a form control group. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls. The grouping provided by FIELDSET also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form.

While FIELDSET is not widely supported by current browsers, it can be used safely by explicitly closing any preceding P element with </P> or by including an empty P prior to the FIELDSET. This causes non-supporting browsers to infer the start of a block-level element even though they ignore the block-level FIELDSET element.

The content of a FIELDSET element must begin with a LEGEND to provide a caption for the group of controls. Following the LEGEND, FIELDSET may contain any inline or block-level element, including another FIELDSET.

An example follows:

<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

  <FIELDSET>
    <LEGEND ACCESSKEY=I>Contact Information</LEGEND>
    <TABLE>
      <TR>
        <TD>
          <LABEL FOR=name ACCESSKEY=N>Name:</LABEL>
        </TD>
        <TD>
          <INPUT TYPE=text NAME=name ID=name>
        </TD>
      </TR>
      <TR>
        <TD>
          <LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL>
        </TD>
        <TD>
          <INPUT TYPE=text NAME=email ID=email>
        </TD>
      </TR>
      <TR>
        <TD>
          <LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL>
        </TD>
        <TD>
          <TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA>
        </TD>
      </TR>
    </TABLE>
  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
    <P>Please select the product(s) that you wish to order:</P>
    <P>
      <LABEL ACCESSKEY=3>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">
        <A HREF="/reference/wilbur/">HTML 3.2 Reference</A>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=4>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">
        <A HREF="/reference/html40/">HTML 4.0 Reference</A>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=S>
        <INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
        <A HREF="/reference/css/">Cascading Style Sheets Guide</A>
      </LABEL>
    </P>
  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
    <P>
      <LABEL ACCESSKEY=V>
        <INPUT TYPE=radio NAME=card VALUE=visa> Visa
      </LABEL>
      <LABEL ACCESSKEY=M>
        <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=u>
        Number: <INPUT TYPE=text NAME=number>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=E>
        Expiry: <INPUT TYPE=text NAME=expiry>
      </LABEL>
    </P>
  </FIELDSET>

  <P>
    <INPUT TYPE=submit VALUE="Submit order">
    <INPUT TYPE=reset VALUE="Clear order form">
  </P>

</FORM>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FIELDSET in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


FONT - Font Change

Syntax

<FONT>...</FONT>

Attribute Specifications

SIZE=CDATA (font size adjustment)
COLOR=Color (font color adjustment)
FACE=CDATA (font face adjustment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements except PRE

Description

The FONT element, deprecated in HTML 4.0 in favor of style sheets, allows authors to suggest rudimentary font changes. Use of the FONT element brings numerous usability and accessibility problems, as discussed in the article What's Wrong With FONT?

SIZE

The least harmful use of the FONT element is in suggesting relative changes in font size with <FONT SIZE="+1"> or <FONT SIZE="-1">. These tags increment or decrement the font size relative to the size specified in the BASEFONT element, or relative to a base size of 3 if no BASEFONT element is used. Sizes are based on a seven-point scale (1..7) that is browser dependent.

While authors can specify SIZE values such as -2 and +3, as well as absolute values such as 1, these kinds of changes are strongly discouraged due to the sensitivity some users have to different font sizes. While a value like -2 may look right to you with your eyesight and user settings, it could easily be unreadable to a user with different eyesight and user settings.

COLOR

The COLOR attribute suggests a text color. While most browsers allow users to override author color changes, the widely used Netscape Navigator 2.x, 3.x, and 4.x do not override colors specified with FONT. This makes the COLOR attribute very dangerous from an accessibility point of view.

Authors often use the COLOR attribute as a form of emphasis or to indicate a heading. In these cases, use of structural HTML (e.g., STRONG, H1) along with a style sheet provides a more flexible, accessible document.

FACE

The FACE attribute gives a comma-separated list of font faces in which to display text. The fonts are listed in order of preference, so that if the browser does not have the first font listed, it will try the second, then the third, and so on.

The FONT element is an inline element, meaning that it cannot contain block-level elements such as P and TABLE. Again, style sheets provide much more flexibility in suggesting font styles.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FONT in W3C HTML 4.0 Recommendation
  • FONT in W3C HTML 3.2 Recommendation
  • FONT in WDG HTML 3.2 Reference
  • FONT in Learning HTML 3.2 by Examples
  • What's Wrong With FONT?
  • <FONT FACE> considered harmful
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


FORM - Interactive Form

Syntax

<FORM>...</FORM>

Attribute Specifications

ACTION=url (form handler)
METHOD=[ get | post ] (HTTP method for submitting form)
ENCTYPE=ContentType (content type to submit form as)
ACCEPT-CHARSET=Charsets (supported character encodings)
TARGET=FrameTarget (frame to render form result in)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONSUBMIT=Script (form was submitted)
ONRESET=Script (form was reset)

Contents

  • In HTML 4.0 Strict, one or more SCRIPT or block-level elements except FORM
  • In HTML 4.0 Transitional, inline elements or block-level elements except FORM

Contained in

APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The FORM element defines an interactive form. The element should contain form controls--INPUT, SELECT, TEXTAREA, and BUTTON--through which the user interacts.

ACTION

When the user submits the form, through an INPUT or BUTTON element with TYPE=submit, the form values are submitted to the url given in FORM's required ACTION attribute. ACTION usually points to a CGI script or Java servlet that handles the form submission.

A mailto url (e.g., mailto:liam@htmlhelp.com) is also allowed as an ACTION, but this is not supported by all browsers. Non-supporting browsers such as Microsoft Internet Explorer 3.x typically will open a blank e-mail message when the user submits a mailto form. Even on supporting browsers, mailto forms are troublesome in that they fail to provide feedback to the user after the form submission.

Free CGI scripts exist for handling forms; some are even remotely hosted for authors whose providers refuse to allow CGI scripts to be run locally.

METHOD & ENCTYPE

How the form input is sent to the server depends on the METHOD and ENCTYPE attributes. When the METHOD is get (the default), the form input is submitted as an HTTP GET request with ?form_data appended to the url specified in the ACTION attribute.

Using the get method allows the form submission to be contained completely in a URL. This can be advantageous in that it permits bookmarking in current browsers, but it also prevents form data from containing non-ASCII characters such as "é" and "©". As well, the amount of form data that can be handled by the get method is limited by the maximum length of the URL that the server and browser can process. To be safe, any form whose input might contain non-ASCII characters or more than 100 characters should use METHOD=post.

With a METHOD value of post, the form input is submitted as an HTTP POST request with the form data sent in the body of the request. Most current browsers are unable to bookmark POST requests, but POST does not entail the character encoding and length restrictions imposed by GET.

The ENCTYPE attribute specifies the content type used in submitting the form, and defaults to application/x-www-form-urlencoded. This content type results in name/value pairs sent to the server as name1=value1&name2=value2... with space characters replaced by "+" and reserved characters (like "#") replaced by "%HH" where HH is the ASCII code of the character in hexadecimal. Line breaks are encoded as "%0D%0A"--a carriage return followed by a line feed.

Authors should generally only use a different ENCTYPE when the form includes a TYPE=file INPUT element, in which case the ENCTYPE should be multipart/form-data and the METHOD must be post. The format of multipart/form-data requests is given in RFC 1867.

Tools such as cg-eye allow authors to easily create and view a request, simulating the submission of a form. However, authors often do not need to concern themselves with the exact format of the submission; CGI libraries including CGI.pm transparently handle get and post submissions sent as application/x-www-form-urlencoded or multipart/form-data.

ACCEPT-CHARSET

The ACCEPT-CHARSET attribute specifies a list of character encodings that are accepted by the form handler. The value consists of a list of "charsets" separated by commas and/or spaces. The default value is UNKNOWN and is usually considered to be the character encoding used to transmit the document containing the FORM.

TARGET

The TARGET attribute is used with frames to specify in which frame the form response should be rendered. If no frame with such a name exists, the response is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the response in a new, unnamed window
  • _self renders the response in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the response in the immediate FRAMESET parent
  • _top renders the response in the full, unframed window

ONSUBMIT & ONRESET

The FORM element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, INPUT accepts the following event attributes:

  • ONSUBMIT, when the form is submitted;
  • ONRESET, when the form is reset.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FORM in W3C HTML 4.0 Recommendation
  • FORM in W3C HTML 3.2 Recommendation
  • FORM in HTML 2.0 Standard
  • FORM in WDG HTML 3.2 Reference
  • FORM in Learning HTML 3.2 by Examples
  • RFC 1867: Form-based File Upload in HTML
  • The Common Gateway Interface
  • Java Servlets
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


FRAME - Frame

Syntax

<FRAME>

Attribute Specifications

NAME=CDATA (name of frame)
SRC=url (content of frame)
LONGDESC=url (long description of frame)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
NORESIZE (disallow frame resizing)
SCROLLING=[ yes | no | auto ] (ability to scroll)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

FRAMESET

Description

The FRAME element defines a frame--a rectangular subspace within a Frameset document. Each FRAME must be contained within a FRAMESET that defines the dimensions of the frame.

SRC & LONGDESC

The SRC attribute provides the url of the frame's content, which is typically an HTML document. If the frame's content is an image, video, or similar object, and if the object cannot be described adequately using the TITLE attribute of FRAME, then authors should use the LONGDESC attribute to provide the url of a full HTML description of the object.

For better accessibility to disabled users and better indexing with search engines, authors should not use an image or similar object as the content of a frame. Rather, the object should be embedded within an HTML document to allow the indexing of keywords and easier provision of alternate content.

NAME

The NAME attribute gives a name to the frame for use with the TARGET attribute of the A, AREA, BASE, FORM, and LINK elements. The NAME attribute value must begin with a character in the range A-Z or a-z.

The NAME should be human-readable and based on the content of the frame since non-windows browsers may use the NAME as a title for presenting a list of frames to the user. For example, NAME=left would be inappropriate since it says nothing about the content while NAME=nav would be inappropriate since it is not very human-readable. More suitable would be NAME=Content and NAME=Navigation. The TITLE attribute can also be used to provide a slightly longer title for the frame, though this is not widely supported by current browsers.

An example follows:

<FRAMESET ROWS="*,100">
  <FRAMESET COLS="40%,*">
    <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
    <FRAME NAME="Content" SRC="main.html" TITLE="Content">
  </FRAMESET>
  <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
      <UL>
        <LI>
          <A HREF="reference/html40/">HTML 4.0 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?">
      </P>
    </BODY>
  </NOFRAMES>
</FRAMESET>

The FRAME element also accepts a number of attributes to specify the presentation on visual browsers. Style sheets provide a more flexible method of defining the presentation of frames, but the element's presentational attributes are more widely supported.

FRAMEBORDER

The FRAMEBORDER attribute specifies whether or not the frame has a visible border. The default value, 1, tells the browser to draw a border between the frame and all adjoining frames. The value 0 indicates that no border should be drawn, though borders from other frames will override this.

To fully remove the border, some browsers also require the use of other, non-standard attributes. See How do I remove the border around frames? for more details.

Note that removing the border of a frame takes away the user's ability to resize the frame on most browsers.

MARGINWIDTH & MARGINHEIGHT

The MARGINWIDTH and MARGINHEIGHT attributes define the number of pixels to use as the left/right margins and top/bottom margins, respectively, within the frame. The value must be greater than one pixel.

NORESIZE

The boolean NORESIZE attribute prevents the user from resizing the frame. This attribute should never be used in a user-friendly Web site.

SCROLLING

The SCROLLING attribute specifies whether scrollbars are provided for the frame. The default value, auto, generates scrollbars only when necessary. The value yes gives scrollbars at all times, and the value no suppresses scrollbars--even when they are needed to see all the content. The value no should never be used.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FRAME in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


FRAMESET - Frameset

Syntax

<FRAMESET>...</FRAMESET>

Attribute Specifications

[3.2] ROWS=MultiLengths (row lengths)
[3.2] COLS=MultiLengths (column lengths)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
[4.0] ONLOAD=Script (all frames have been loaded)
[4.0] ONUNLOAD=Script (all frames have been removed)

Contents

One or more FRAMESET and FRAME elements, as well as an optional NOFRAMES

Contained in

HTML

Description

The FRAMESET element is a frame container for dividing a window into rectangular subspaces called frames. In a Frameset document, the outermost FRAMESET element takes the place of BODY and immediately follows the HEAD.

The FRAMESET element contains one or more FRAMESET or FRAME elements, along with an optional NOFRAMES element to provide alternate content for browsers that do not support frames or have frames disabled. A meaningful NOFRAMES element should always be provided and should at the very least contain links to the main frame or frames.

[3.2] ROWS & COLS

The ROWS and COLS attributes define the dimensions of each frame in the set. Each attribute takes a comma-separated list of lengths, specified in pixels, as a percentage, or as a relative length. A relative length is expressed as i* where i is an integer. For example, a frameset defined with ROWS="3*,*" (* is equivalent to 1*) will have its first row allotted three times the height of the second row.

The values specified for the ROWS attribute give the height of each row, from top to bottom. The COLS attribute gives the width of each column from left to right. If ROWS or COLS is omitted, the implied value for the attribute is 100%. If both attributes are specified, a grid is defined and filled left-to-right then top-to-bottom.

Example

The following example sets up a grid with two rows and three columns:

<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">
  <FRAME NAME="Photo1" SRC="Row1_Column1.html">
  <FRAME NAME="Photo2" SRC="Row1_Column2.html">
  <FRAME NAME="Photo3" SRC="Row1_Column3.html">
  <FRAME NAME="Caption1" SRC="Row2_Column1.html">
  <FRAME NAME="Caption2" SRC="Row2_Column2.html">
  <FRAME NAME="Caption3" SRC="Row2_Column3.html">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
        <UL>
          <LI>
            <A HREF="Row1_Column1.html">Photo 1</A>
            (<A HREF="Row2_Column1.html">Caption</A>)
          </LI>
          <LI>
            <A HREF="Row1_Column2.html">Photo 2</A>
            (<A HREF="Row2_Column2.html">Caption</A>)
          </LI>
          <LI>
            <A HREF="Row1_Column3.html">Photo 3</A>
            (<A HREF="Row2_Column3.html">Caption</A>)
          </LI>
      </UL>
    </BODY>
  </NOFRAMES>
</FRAMESET>

The next example features nested FRAMESET elements to define two frames in the first row and one frame in the second row:

<FRAMESET ROWS="*,100">
  <FRAMESET COLS="40%,*">
    <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
    <FRAME NAME="Content" SRC="main.html" TITLE="Content">
  </FRAMESET>
  <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
      <UL>
        <LI>
          <A HREF="reference/html40/">HTML 4.0 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?">
      </P>
    </BODY>
  </NOFRAMES>
</FRAMESET>

When pixel lengths are used, they should always be combined with a relative length to handle various window sizes. Pixel lengths should only be used when the frame consists primarily of images or other objects with a fixed size in pixels. Due to their ability to adapt to different window sizes, percentages and relative lengths are generally preferred.

[4.0] ONLOAD & ONUNLOAD

The FRAMESET element also accepts ONLOAD and ONUNLOAD attributes to specify client-side scripting actions to perform when the frames have all been loaded or removed.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FRAMESET in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


No Elements

There are No Elements That Start With This Letter

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


H1 - Level-one Heading

Hn - Level-n Heading

Syntax

<Hn>...</Hn> where n=1..6

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents
Inline elements
Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The Hn element defines a level-n heading. That is a heading from size 1 (the largest) to size 6 (the smallest). A document generally should have exactly one H1 element to mark the most important heading.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting alignment.

Visual browsers typically render H1 in a large, bold font. Authors can suggest a presentation for H1 through style sheets. The following CSS ruleset suggests a presentation for all H1 elements:

h1 {
  color: #c33;
  background: transparent;
  font-weight: bold;
  text-align: center
}

Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the heading's importance and placement in the document. An H1 is typically used as the main heading for a document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • H1 in W3C HTML 4.0 Recommendation
  • H1 in W3C HTML 3.2 Recommendation
  • H1 in HTML 2.0 Standard
  • H1 in WDG HTML 3.2 Reference
  • H1 in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


H2 - Level-two Heading

Hn - Level-n Heading

Syntax

<Hn>...</Hn> where n=1..6

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The Hn element defines a level-n heading. That is a heading from size 1 (the largest) to size 6 (the smallest). A document generally should have exactly one H1 element to mark the most important heading.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting alignment.

Visual browsers typically render H1 in a large, bold font. Authors can suggest a presentation for H1 through style sheets. The following CSS ruleset suggests a presentation for all H1 elements:

h1 {
  color: #c33;
  background: transparent;
  font-weight: bold;
  text-align: center
}

Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the heading's importance and placement in the document. An H1 is typically used as the main heading for a document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

   <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
    | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
   SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT
    CLASSID="java:Yahtzee.class"
    CODETYPE="application/java" WIDTH=400 HEIGHT=250
    STANDBY="Ready to play Yahtzee?" TITLE="My
    Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • H1 in W3C HTML 4.0 Recommendation

  • H1 in W3C HTML 3.2 Recommendation
  • H1 in HTML 2.0 Standard
  • H1 in WDG HTML 3.2 Reference
  • H1 in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


H3 - Level-three Heading

Hn - Level-n Heading

Syntax

<Hn>...</Hn> where n=1..6

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The Hn element defines a level-n heading. That is a heading from size 1 (the largest) to size 6 (the smallest). A document generally should have exactly one H1 element to mark the most important heading.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting alignment.

Visual browsers typically render H1 in a large, bold font. Authors can suggest a presentation for H1 through style sheets. The following CSS ruleset suggests a presentation for all H1 elements:

h1 {
  color: #c33;
  background: transparent;
  font-weight: bold;
  text-align: center
}

Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the heading's importance and placement in the document. An H1 is typically used as the main heading for a document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

   <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
    | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
   SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT
    CLASSID="java:Yahtzee.class"
    CODETYPE="application/java" WIDTH=400 HEIGHT=250
    STANDBY="Ready to play Yahtzee?" TITLE="My
    Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • H1 in W3C HTML 4.0 Recommendation

  • H1 in W3C HTML 3.2 Recommendation
  • H1 in HTML 2.0 Standard
  • H1 in WDG HTML 3.2 Reference
  • H1 in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


H4 - Level-four Heading

Hn - Level-n Heading

Syntax

<Hn>...</Hn> where n=1..6

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The Hn element defines a level-n heading. That is a heading from size 1 (the largest) to size 6 (the smallest). A document generally should have exactly one H1 element to mark the most important heading.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting alignment.

Visual browsers typically render H1 in a large, bold font. Authors can suggest a presentation for H1 through style sheets. The following CSS ruleset suggests a presentation for all H1 elements:

h1 {
  color: #c33;
  background: transparent;
  font-weight: bold;
  text-align: center
}

Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the heading's importance and placement in the document. An H1 is typically used as the main heading for a document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

   <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
    | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
   SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT
    CLASSID="java:Yahtzee.class"
    CODETYPE="application/java" WIDTH=400 HEIGHT=250
    STANDBY="Ready to play Yahtzee?" TITLE="My
    Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • H1 in W3C HTML 4.0 Recommendation

  • H1 in W3C HTML 3.2 Recommendation
  • H1 in HTML 2.0 Standard
  • H1 in WDG HTML 3.2 Reference
  • H1 in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


H5 - Level-five Heading

Hn - Level-n Heading

Syntax

<Hn>...</Hn> where n=1..6

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The Hn element defines a level-n heading. That is a heading from size 1 (the largest) to size 6 (the smallest). A document generally should have exactly one H1 element to mark the most important heading.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting alignment.

Visual browsers typically render H1 in a large, bold font. Authors can suggest a presentation for H1 through style sheets. The following CSS ruleset suggests a presentation for all H1 elements:

h1 {
  color: #c33;
  background: transparent;
  font-weight: bold;
  text-align: center
}

Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the heading's importance and placement in the document. An H1 is typically used as the main heading for a document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

   <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
    | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
   SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT
    CLASSID="java:Yahtzee.class"
    CODETYPE="application/java" WIDTH=400 HEIGHT=250
    STANDBY="Ready to play Yahtzee?" TITLE="My
    Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • H1 in W3C HTML 4.0 Recommendation

  • H1 in W3C HTML 3.2 Recommendation
  • H1 in HTML 2.0 Standard
  • H1 in WDG HTML 3.2 Reference
  • H1 in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


H6 - Level-six Heading

Hn - Level-n Heading

Syntax

<Hn>...</Hn> where n=1..6

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The Hn element defines a level-n heading. That is a heading from size 1 (the largest) to size 6 (the smallest). A document generally should have exactly one H1 element to mark the most important heading.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting alignment.

Visual browsers typically render H1 in a large, bold font. Authors can suggest a presentation for H1 through style sheets. The following CSS ruleset suggests a presentation for all H1 elements:

h1 {
  color: #c33;
  background: transparent;
  font-weight: bold;
  text-align: center
}

Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the heading's importance and placement in the document. An H1 is typically used as the main heading for a document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

   <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
    | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
   SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT
    CLASSID="java:Yahtzee.class"
    CODETYPE="application/java" WIDTH=400 HEIGHT=250
    STANDBY="Ready to play Yahtzee?" TITLE="My
    Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • H1 in W3C HTML 4.0 Recommendation

  • H1 in W3C HTML 3.2 Recommendation
  • H1 in HTML 2.0 Standard
  • H1 in WDG HTML 3.2 Reference
  • H1 in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HEAD - Document Head

Syntax

<HEAD>...</HEAD>

Attribute Specifications

[4.0] PROFILE=url (dictionary of meta info)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Exactly one TITLE element, optional BASE and ISINDEX elements, and zero or more SCRIPT, STYLE, META, LINK, or OBJECT elements

Contained in

HTML

Description

The HEAD element contains header information about the document, such as its title, keywords, description, and style sheet. HEAD is required in all documents, but its start and end tags are always optional. The HEAD element is followed by the BODY in HTML 4.0 Strict and Transitional documents; in HTML 4.0 Frameset documents, the HEAD is followed by a FRAMESET element.

Content in the HEAD is generally not rendered, with the exception of the required TITLE element. If the </HEAD> end tag is omitted, the first BODY or FRAMESET element infers the end of the HEAD.

[4.0] PROFILE

The optional PROFILE attribute of HEAD gives the location of a metadata profile. A profile defines properties that may be used by META and LINK elements within the HEAD. There is no prescribed format for profiles.

Work is currently underway on improving the use of metadata on the Web. See the W3C's Metadata and Resource Description area for the latest information.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • HEAD in W3C HTML 4.0 Recommendation
  • HEAD in W3C HTML 3.2 Recommendation
  • HEAD in HTML 2.0 Standard
  • HEAD in WDG HTML 3.2 Reference
  • HEAD in Learning HTML 3.2 by Examples
  • Metadata at W3C
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HR - Horizontal Rule

Syntax

<HR>

Attribute Specifications

ALIGN=[ left | center | right ] (horizontal alignment)
NOSHADE (solid line)
SIZE=Pixels (line height)
WIDTH=Length (line width)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents
Empty
Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The HR element defines a horizontal rule for visual browsers. While this element is inherently presentational, it can be used structurally as a section divider. However, for greater flexibility the HR element can be replaced with the border-bottom or border-top properties of Cascading Style Sheets. For example, the following style rule would suggest a horizontal line above all DIV elements with CLASS=navbar:

div.navbar { border-top: solid medium navy }

ALIGN & WIDTH

HR's deprecated ALIGN attribute suggests the horizontal alignment of the line. Possible values are left, right, and center. The deprecated WIDTH attribute specifies the width of the line as a percentage or a number of pixels. If a width is specified, percentages are generally preferred since they adjust to varying window sizes. The width property of Cascading Style Sheets provides greater flexibility in suggesting the width of horizontal rules.

NOSHADE & SIZE

The boolean NOSHADE attribute suggests that the rule be rendered as a solid line rather than the groove style commonly used. The SIZE attribute suggests the height of the line in pixels. These attributes are both deprecated in favor of style sheets.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • HR in W3C HTML 4.0 Recommendation
  • HR in W3C HTML 3.2 Recommendation
  • HR in HTML 2.0 Standard
  • HR in WDG HTML 3.2 Reference
  • HR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


HTML - HTML Document

Syntax

<HTML>...</HTML>

Attribute Specifications

VERSION=CDATA (HTML version)
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl

Contents

  • In HTML 4.0 Strict and Transitional: HEAD followed by BODY
  • In HTML 4.0 Frameset: HEAD followed by FRAMESET

Contained in

Not applicable--HTML is a top-level element

Description

The HTML element contains the HTML document, made up of the HEAD followed by the BODY, except in Frameset documents where the FRAMESET element replaces the BODY. The start and end tags of the HTML element are both optional.

The LANG attribute is typically set on the HTML element to specify the base language of the document. The language should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese.

VERSION

The deprecated VERSION attribute specifies the Document Type Definition (DTD) that describes the document. This attribute should not be used since the DOCTYPE declaration makes it redundant.

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

More Information

  • HTML in W3C HTML 4.0 Recommendation
  • HTML in W3C HTML 3.2 Recommendation
  • HTML in HTML 2.0 Standard
  • HTML in WDG HTML 3.2 Reference
  • HTML in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


I - Italic Text

Syntax

<I>...</I>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The I element suggests that text be rendered as italic text. In most cases, use of a phrase element such as EM, DFN, VAR, or CITE is more appropriate since these elements express the meaning of the text more clearly.

The I element is a suitable choice for marking a structure for which no phrase element exists. For example, foreign phrases and taxonomic names have no structural element in HTML 4.0, but italic text is often an appropriate visual rendering:

<H1><I LANG=fr>Chacun son goût !</I></H1>
<P>Some people prefer dogs--<I CLASS=species>Canis familiaris</I>--while others are eternal lovers of cats--<I CLASS=species>Felis cattus</I>.

Note the use of the CLASS and LANG attributes to add structural significance to the I elements. This allows greater flexibility when applying style sheets to different kinds of italic text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • I in W3C HTML 4.0 Recommendation
  • I in W3C HTML 3.2 Recommendation
  • I in HTML 2.0 Standard
  • I in WDG HTML 3.2 Reference
  • I in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


IFRAME - Inline Frame

Syntax

<IFRAME>...</IFRAME>

Attribute Specifications

SRC=url (url of frame content)
NAME=CDATA (name of frame)
LONGDESC=url (link to long description)
WIDTH=Length (frame width)
HEIGHT=Length (frame height)
ALIGN=[ top | middle | bottom | left | right ] (frame alignment)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
SCROLLING=[ yes | no | auto ] (ability to scroll)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string

Contents

Inline elements, block-level elements

Contained in

Inline elements, block-level elements

Description

The IFRAME element defines an inline frame for the inclusion of external objects including other HTML documents. IFRAME provides a subset of the functionality of OBJECT; the only advantage to IFRAME is that an inline frame can act as a target for other links. OBJECT is more widely supported than IFRAME, and, unlike IFRAME, OBJECT is included in HTML 4.0 Strict.

SRC & NAME

IFRAME's SRC attribute provides the location of the frame content--typically an HTML document. The optional NAME attribute specifies the name of the inline frame, allowing links to target the frame.

The content of the IFRAME element is used as an alternative for browsers that are not configured to show or do not support inline frames. The content may consist of inline or block-level elements, though any block-level elements must be allowed inside the containing element of IFRAME. For example, an IFRAME within an H1 cannot contain an H2, but an IFRAME within a DIV can contain any block-level elements.

LONGDESC

The LONGDESC attribute gives the url of a long description of the frame's contents. This is particularly useful for full descriptions of embedded objects. Note that LONGDESC describes the frame content while the content of the IFRAME element acts as a replacement when the external resource cannot be inlined.

An example follows:

<IFRAME SRC="recipe.html" TITLE="The Famous Recipe">
<!-- Alternate content for non-supporting browsers -->
<H2>The Famous Recipe</H2>
<H3>Ingredients</H3>
...
</IFRAME>

WIDTH, HEIGHT & FRAMEBORDER

The WIDTH and HEIGHT attributes specify the dimensions of the inline frame in pixels or as a percentage of the available space. The FRAMEBORDER attribute specifies whether or not a border should be drawn. The default value of 1 results in a border while a value of 0 suppresses the border. Style sheets allow greater flexibility in suggesting the border presentation.

ALIGN

The ALIGN attribute specifies the alignment of the inline frame. The values top, middle, and bottom specify the frame's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the frame with the current baseline. To center the frame horizontally on the page, place the frame in a centered block, e.g.,

<P ALIGN=center><IFRAME SRC="foo.html" WIDTH=300 HEIGHT=100></IFRAME></P>

The other ALIGN values, left and right, specify a floating frame; the frame is placed at the left or right margin and content flows around it. To place content below the frame, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning inline frames.

MARGINWIDTH & MARGINHEIGHT

The MARGINWIDTH and MARGINHEIGHT attributes define the number of pixels to use as the left/right margins and top/bottom margins, respectively, within the inline frame. The value must be greater than one pixel.

SCROLLING

The SCROLLING attribute specifies whether scrollbars are provided for the inline frame. The default value, auto, generates scrollbars only when necessary. The value yes gives scrollbars at all times, and the value no suppresses scrollbars--even when they are needed to see all the content. The value no should never be used.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

More Information

  • IFRAME in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


IMG - Inline Image

Syntax

<IMG>

Attribute Specifications

SRC=url (location of image)
ALT=Text (alternate text)
LONGDESC=url (link to long description)
WIDTH=Length (image width)
HEIGHT=Length (image height)
USEMAP=url (client-side image map)
ISMAP (server-side image map)
ALIGN=top|middle|bottom|left|right (image alignment)
BORDER=Length (link border width)
HSPACE=Pixels (horizontal gutter)
VSPACE=Pixels (vertical gutter)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

Inline elements, block-level elements except PRE

SRC

The IMG element specifies an inline image. The required SRC attribute specifies the location of the image. The image can be any format, though browsers generally only support GIF and JPEG images. Support for the PNG image format is growing slowly.

ALT

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the image rather than a description of the image. For example, ALT="Welcome to XYZ Corp." would be more appropriate than ALT="XYZ Corp. Logo" for a company's logo on its welcome page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images; see Use of ALT texts in IMGs for a thorough discussion.

LONGDESC

The LONGDESC attribute gives the location of a long description of the image. This attribute should be used to provide a long description of an image where this would be useful. For example, a painting, graph, or corporate logo could be given a description so that blind and other text-only users can develop a mental picture of the image.

WIDTH & HEIGHT

The WIDTH and HEIGHT attributes are most useful when they specify the exact dimensions of the image in pixels. This allows image-loading browsers to reserve the proper amount of space for the image and continue to render the rest of the document, thus giving the appearance of a faster-loading page.

Unfortunately, many graphical browsers will use these dimensions when not loading images, which can cause the ALT text to be cut off if the image is small or the ALT text is large. In such cases, authors may wish to leave off the WIDTH and HEIGHT attributes, depending on the importance of the ALT text and the placement of the image on the page (an image towards the end of the document without WIDTH and HEIGHT attributes will generally not noticeably slow the rendering of the page).

Authors can also specify different dimensions for the WIDTH and HEIGHT attributes, in which case browsers should scale the image. Percentages, relative to the horizontal or vertical space available (not relative to the image's natural size) can also be specified, though these are not as widely supported as pixel lengths. Since browsers typically do a poor job of scaling images, authors should avoid using WIDTH and HEIGHT for this purpose as much as possible.

ALIGN

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the image. The values top, middle, and bottom specify the image's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the image with the current baseline. To center the image horizontally on the page, place the image in a centered block, e.g.,

<H1 ALIGN=center><IMG SRC="logo.gif" ALT="Welcome to XYZ Company"></H1>

The other ALIGN values, left and right, specify a floating image; the image is placed at the left or right margin and content flows around it. To place content below the image, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning images.

BORDER

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the image's border. Specifying BORDER=0 will eliminate the border around a linked image in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the image would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A HREF="reference/"><IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference</A>

HSPACE & VSPACE

The deprecated HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the image. The value must be in pixels and applies to both sides of the image. Style sheets provide more flexibility in specifying the space around images.

USEMAP

The USEMAP attribute is used with client-side image maps to give the location of the map definition. While this value may be a full url--allowing a single map definition to be applied to multiple pages--Netscape Navigator will only find map definitions in the same file, effectively limiting the USEMAP value to a fragment identifier such as "#map".

ISMAP

The ISMAP attribute is used with server-side image maps. When the ISMAP attribute is included with a linked image and the user clicks the image, the image coordinates clicked are sent to the server, from which a location can be returned. The method of handling the coordinates is server-dependent, but the NCSA server's method is most common.

Server-side image maps are better supported than client-side image maps, but almost all browsers today support both methods. Client-side image maps are generally preferred since they do not require an extra request to the server (and so are faster), and since they allow a usable menu to be provided to text-only users. Using both methods in combination is a good approach, since browsers supporting client-side image maps will use that method while older browsers will use the server-side image map. An example follows:

<A HREF="/cgi-bin/imagemap/sitemap.map"><IMG SRC="sitemap.gif" ALT="Site Map" ISMAP USEMAP="#map" WIDTH=100 HEIGHT=100></A>

A MAP element named map would have to be included in the same document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • IMG in W3C HTML 4.0 Recommendation
  • IMG in W3C HTML 3.2 Recommendation
  • IMG in HTML 2.0 Standard
  • IMG in WDG HTML 3.2 Reference
  • IMG in Learning HTML 3.2 by Examples
  • Use of ALT texts in IMGs
  • Image Use on the Web
  • JPEG FAQ
  • PNG (Portable Network Graphics) Home Page
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


INPUT - Form Input

Syntax

<INPUT>

Attribute Specifications

TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image | button ] (type of input)
NAME=CDATA (key in submitted form)
VALUE=CDATA (value of input)
CHECKED (check radio button or checkbox)
SIZE=CDATA (suggested number of characters for text input)
MAXLENGTH=Number (maximum number of characters for text input)
SRC=url (source for image)
ALT=CDATA (alternate text for image input)
USEMAP=url (client-side image map)
ALIGN=[ top | middle | bottom | left | right ] (alignment of image input)
DISABLED (disable element)
READONLY (prevent changes)
ACCEPT=ContentTypes (media types for file upload)
ACCESSKEY=Character (shortcut key)
TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)
ONSELECT=Script (element text selected)
ONCHANGE=Script (element value changed)

Contents

Empty

Contained in

Block-level elements, inline elements except BUTTON

Description

The INPUT element defines a form control for the user to enter input. While INPUT is most useful within a FORM, HTML 4.0 allows INPUT in any block-level or inline element other than BUTTON. However, Netscape Navigator will not display any INPUT elements outside of a FORM.

NAME

When a form is submitted, the current value of each INPUT element within the FORM is sent to the server as name/value pairs. The INPUT element's NAME attribute provides the name used. The value sent depends on the type of form control and on the user's input.

MAXLENGTH, SIZE & TYPE="text"

The type of form control defined by INPUT is given by the TYPE attribute. The default TYPE is text, which provides a single-line text input field. The VALUE attribute specifies the initial value for the text field. The SIZE and MAXLENGTH attributes suggest the number of characters and maximum number of characters, respectively, of the text field.

While the MAXLENGTH attribute can be an effective guide to the user, authors should not depend on the enforcement of a maximum number of characters by the client. A user could copy the HTML document, remove the MAXLENGTH attribute, and submit the form. Thus authors of form handlers should ensure that any necessary input length checks are repeated on the server-side.

TYPE="password"

The password input type is a variation on the text type. The only difference is that the input characters are masked, typically by a series of asterisks, to protect sensitive information from onlookers. Note, however, that the actual value is transmitted to the server as clear text, so password inputs do not provide sufficient securlty for credit card numbers or other highly sensitive information.

The following example uses text and password fields with the LABEL element to bind text labels to the INPUT elements:

<P><LABEL ACCESSKEY=U>User name: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8></LABEL></P>
<P><LABEL ACCESSKEY=P>Password: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12></LABEL></P>

READONLY & DISABLED

The boolean READONLY attribute, new in HTML 4.0 and poorly supported by current browsers, prevents the user from editing the content of the text or password input types. Read-only elements are still submitted with the form. The DISABLED attribute, which applies to all input types but is also poorly supported, disables the control. Disabled elements are read-only elements with the added restrictions that the values are not submitted with the form, the elements cannot receive focus, and the elements are skipped when navigating the document by tabbing.

TYPE="radio", TYPE="checkbox", VALUE & CHECKED

The radio and checkbox input types provide switches that can be turned on and off by the user. The two types differ in that radio buttons are grouped (by specifying the same NAME attribute on each INPUT) so that only one radio button in a group can be selected at any time. Checkboxes can be checked without changing the state of other checkboxes with the same NAME. The VALUE attribute, required for radio buttons and checkboxes, gives the value of the control when it is checked. The boolean CHECKED attribute specifies that the control is initially checked.

Some browsers require one radio button in a group to be selected at all times. To ensure that an appropriate default choice is made, authors may wish to define one of the radio INPUT elements as CHECKED.

In the following example, only one payment method may be selected by the user since the radio buttons have the same NAME:

<P>Please indicate your method of payment:</P>
<P><LABEL ACCESSKEY=C><INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED> Credit card</LABEL><BR>
<LABEL ACCESSKEY=D><INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card</LABEL><BR>
<LABEL ACCESSKEY=M><INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money order</LABEL></P>

<P><LABEL ACCESSKEY=S><INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send receipt by e-mail</LABEL></P>

TYPE="file" & ACCEPT

The file input type creates a field through which users can upload files from their local computer or network. The VALUE attribute specifies the name of the initial file, but it is typically ignored by browsers as a securlty precaution. The ACCEPT attribute gives a comma-separated list of media types accepted, allowing the browser to filter out inappropriate files. Current browsers generally ignore the ACCEPT attribute.

A form that includes a file INPUT must specify METHOD=post and ENCTYPE="multipart/form-data" in the <FORM> tag. CGI libraries such as CGI.pm allow simple handling of such forms.

Form-based file upload is unsupported by many currently deployed browsers. Authors should provide alternative methods of input where possible.

The following example allows the user to upload an HTML document for validation:

<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data">
<P>Select an HTML document to upload and validate. If your browser does not support form-based file upload, use one of our <A HREF="methods.html">alternate methods of validation</A>.</P>
<P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P>
<P><INPUT TYPE=submit VALUE="Validate it!"></P>
</FORM>

TYPE="hidden"

The hidden input type allows authors to include form data without having it rendered to the user. This is particularly useful in form applications that span several HTML documents; user input can be carried from form to form by hidden INPUTs. Some generalized CGI scripts use hidden INPUTs to define variables for the script, as in the following example, which defines a recipient and subject for the e-mailed contents of a form:

<INPUT TYPE=hidden NAME=recipient VALUE="liam@htmlhelp.com">
<INPUT TYPE=hidden NAME=subject VALUE="Feedback on your HTML Reference">

Note that the fields are "hidden" in the sense that they are not rendered by the browser. Anyone can still view the HTML document's source to find the "hidden" fields.

TYPE="reset"

The TYPE value reset defines a button by which the user can reset the form to its initial values. The optional VALUE attribute of a reset button overrides the browser's default text for the button.

TYPE="submit"

The submit input type defines a button for submitting the form. As with reset, the optional VALUE attribute provides the text of the button. The presence of the NAME attribute will cause the browser to send a name/value pair for the submit button if it is used to submit the form. This allows authors to provide multiple submit buttons and have the form handler take a different action depending on the submit button used.

TYPE="image", ALT, USEMAP & SRC

The image input type specifies a graphical submit button. The SRC attribute must be included to specify the url of the image. The ALT attribute should be used to give replacement text for those not loading images. ALT is a new addition in HTML 4.0; many browsers rely on either the NAME or VALUE attribute as alternate text, so authors should use all three attributes for the same purpose where possible. The topic of graphical submit buttons for text users is discussed in detail in the article INPUT TYPE=IMAGE for text users?.

When the graphical submit button is clicked, the coordinates of the click are sent with the form submission as name.x=x-value and name.y=y-value where name is the value of the NAME attribute, x-value is the click's pixels from the left of the image, and y-value is the click's pixels from the top of the image. The USEMAP attribute combined with TYPE=image defines a client-side image map that can be used with client-side scripting, but this method is poorly supported. The USEMAP attribute gives the url of the defining MAP.

ALIGN

The deprecated ALIGN attribute specifies the alignment of the graphical submit button. The values top, middle, and bottom specify the button's position with respect to surrounding content on its left and right. The values left and right specify a floating button; the image is placed at the left or right margin and content flows around it. To place content below the button, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning buttons.

TYPE="button"

The input type button specifies a push button for use with client-side scripting. The VALUE attribute gives the text label of the button. The ONCLICK attribute is typically used to define the action taken when the button is activated. An example follows:

<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

In this example, the toggle() function, which would be defined earlier in a SCRIPT element, will be executed when the button is clicked. Since the button is only useful with client-side scripting enabled, authors should usually output the <INPUT TYPE=button> tag using the scripting language to avoid providing a non-functioning button to some users. A more complete version of the previous example would thus be as follows:

<SCRIPT TYPE="text/javascript">
<!--
  document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\""
                 + "ID=toggler ONCLICK=\"toggle()\">");
// -->
</script>

The BUTTON element allows richer labels for submit, reset, and push buttons, but a lack of browser support makes INPUT a more reliable choice at this time.

ACCESSKEY

The ACCESSKEY and TABINDEX attributes apply to all input types except hidden. ACCESSKEY specifies a single Unicode character as a shortcut key for giving focus to the form control. Authors can set the access key on the INPUT element or the LABEL element associated with it. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. A form control with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

ONFOCUS, ONBLUR, ONSELECT, ONCHANGE

The INPUT element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, INPUT accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus;
  • ONSELECT, when text in an input of type text or password is selected;
  • ONCHANGE, when the element loses focus and its value has changed since it received focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • INPUT in W3C HTML 4.0 Recommendation
  • INPUT in W3C HTML 3.2 Recommendation
  • INPUT in HTML 2.0 Standard
  • INPUT in WDG HTML 3.2 Reference
  • INPUT in Learning HTML 3.2 by Examples
  • RFC 1867: Form-based File Upload in HTML
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


INS - Inserted Text

Syntax

<INS>...</INS>

Attribute Specifications

CITE=url (reason for insertion)
DATETIME=Datetime (date and time of insertion)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

Inline elements, block-level elements

Description

The INS element contains content that has been inserted. This element is useful in marking changes from one version of a document to the next. Through style sheets, authors can suggest an appropriate rendering, such as rendering the inserted content in italics, a different color, or a different voice.

INS may be used as either a block-level element or an inline element. If used as an inline element (e.g., within a P), then INS may not contain any block-level elements.

CITE

The optional CITE attribute of INS gives a url with information on why the content was inserted. A brief explanation for the insertion can be given with the TITLE attribute, which may be rendered as a "tooltip" by some browsers.

DATETIME

The optional DATETIME attribute specifies the date and time of the insertion. The value is case-sensitive and of the form YYYY-MM-DDThh:mm:ssTZD. See the values section for a full explanation of this format.

An example follows:

<P>The CENTER element defines a block whose contents are centered horizontally on visual browsers. <INS CITE="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.1.2" DATETIME="1997-12-19T00:00:00-05:00">Note that CENTER is deprecated in HTML 4.0.</INS></P>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • INS in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


ISINDEX - Input Prompt

Syntax

<ISINDEX>

Attribute Specifications

PROMPT=Text (Prompt message)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, HEAD, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

PROMPT

The ISINDEX element defines a single-line text input. The label of the input field is specified using the element's PROMPT attribute. ISINDEX is deprecated in HTML 4.0 in favor of the INPUT element.

The ISINDEX element is equivalent to a FORM with a single INPUT of type text, a METHOD of get, and an ACTION pointing to the url of the document containing the ISINDEX element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • ISINDEX in W3C HTML 4.0 Recommendation
  • ISINDEX in W3C HTML 3.2 Recommendation
  • ISINDEX in HTML 2.0 Standard
  • ISINDEX in WDG HTML 3.2 Reference
  • ISINDEX in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


KBD - Text to be Input

Syntax
<KBD>...</KBD>
Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The KBD element denotes text to be entered by the user. Visual browsers typically render KBD as monospaced text, but authors can suggest a rendering using style sheets. Since KBD is a structural element, it carries meaning, making it preferable to font style elements such as TT when marking up text to be entered by the user.

Example:

<P>If the question does not apply to you, enter <KBD>N/A</KBD>.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • KBD in W3C HTML 4.0 Recommendation
  • KBD in W3C HTML 3.2 Recommendation
  • KBD in HTML 2.0 Standard
  • KBD in WDG HTML 3.2 Reference
  • KBD in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


LABEL - Form Field Label

Syntax

<LABEL>...</LABEL>

Attribute Specifications

FOR=IDREF (associated form field)
ACCESSKEY=Character (shortcut key)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)

Contents

Inline elements except LABEL

Contained in

Block-level elements, inline elements except BUTTON

Description

The LABEL element associates a label with a form control. By associating labels with form controls, authors give important hints to users of speech browsers while also allowing visual browsers to duplicate common GUI features (e.g., the ability to click on a text label to select a radio button or checkbox).

Each LABEL element is associated with exactly one form control. The element's content is the label of the form control and may include inline elements such as IMG and STRONG.

FOR

The FOR attribute explicitly specifies the control associated with the LABEL. The value of the FOR attribute must match the value of the associated form control's ID attribute. In the absence of the FOR attribute, the LABEL must contain the associated form control. This method of implicit association is convenient in many cases, but not an option when the form control and its label are in different table cells, paragraphs, or divisions. The following example illustrates both explicit and implicit label associations:

<TABLE>
  <TR>
    <TD>
      <LABEL FOR=user ACCESSKEY=U>User</LABEL>
    </TD>
    <TD>
      <SELECT NAME=user ID=user>
        <OPTION>Jean</OPTION>
        <OPTION>Kim</OPTION>
        <OPTION>Brian</OPTION>
      </SELECT>
    </TD>
  </TR>
  <TR>
    <TD><LABEL FOR=passwd ACCESSKEY=P>Password</LABEL></TD>
    <TD><INPUT TYPE=password NAME=password ID=passwd></TD>
  </TR>
</TABLE>
<P>
  <LABEL ACCESSKEY=S>
    <INPUT TYPE=checkbox NAME=save VALUE=yes>
    Save user name and password in a cookie
  </LABEL>
</P>
<P>
  <LABEL ACCESSKEY=C>
    Comments to post:
    <TEXTAREA NAME=comments ROWS=8 COLS=50></TEXTAREA>
  </LABEL>
</P>

ACCESSKEY

The ACCESSKEY attribute, used throughout the preceding example, specifies a single Unicode character as a shortcut key for giving focus to the LABEL, which passes the focus on to the associated form control. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

ONFOCUS & ONBLUR

The LABEL element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, LABEL accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LABEL in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


LEGEND - Fieldset Caption

Syntax

<LEGEND>...</LEGEND>

Attribute Specifications

ACCESSKEY=Character (shortcut key)
ALIGN=[ top | bottom | left | right ] (alignment relative to fieldset)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

FIELDSET

Description

The LEGEND element defines a caption for form controls grouped by the FIELDSET element. The LEGEND element must be at the start of a FIELDSET, before any other elements.

While the LEGEND element is not widely supported by current browsers, it can still be used safely if a block-level element immediately follows the LEGEND. Combined with careful use of FIELDSET, this will cause non-supporting browsers to render the caption as its own paragraph. Elements such as STRONG, B, and BIG could also be used to help express the meaning of LEGEND to non-supporting browsers.

An example follows:

<FIELDSET>
  <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
  <P>
    <LABEL ACCESSKEY=V>
      <INPUT TYPE=radio NAME=card VALUE=visa> Visa
    </LABEL>
    <LABEL ACCESSKEY=M>
      <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
    </LABEL>
    <BR>
    <LABEL ACCESSKEY=N>
      Number: <INPUT TYPE=text NAME=number>
    </LABEL>
    <BR>
    <LABEL ACCESSKEY=E>
      Expiry: <INPUT TYPE=text NAME=expiry>
    </LABEL>
  </P>
</FIELDSET>
ACCESSKEY

LEGEND's ACCESSKEY attribute, used throughout the preceding example, specifies a single Unicode character as a shortcut key for giving focus to the LEGEND, allowing the user to quickly jump to a group of form controls. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

ALIGN

The deprecated ALIGN attribute of LEGEND suggests where the caption should be positioned relative to the FIELDSET on visual browsers. Possible values are top, bottom, left, and right. While ALIGN is deprecated, no alternative currently exists in Cascading Style Sheets.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LEGEND in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


LI - List Item

Syntax

<LI>...</LI>

Attribute Specifications

TYPE=[ disc | square | circle | 1 | a | A | i | I ] (style of list item marker)
VALUE=Number (number in sequence)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements (except for LIs used within DIR and MENU, which do not allow block-level elements)

Contained in

OL, UL , DIR, MENU

Description

The LI element defines a list item. The element must be contained within DIR, MENU, OL or UL.

Unless used with the deprecated MENU or DIR elements, LI may contain block-level elements, including H2, TABLE, UL, and OL. This allows OL and UL to be nested, as in the following example:

<UL>
  <LI>
    <H2>HTML Document Type Definitions</H2>
    <UL>
      <LI><A HREF="html.dtd">HTML 2.0</A></LI>
      <LI><A HREF="HTML32.dtd">HTML 3.2</A></LI>
      <LI><A HREF="strict.dtd">HTML 4.0 Strict</A></LI>
    </UL>
  </LI>
  <LI>
    <H2>SGML Character Entity References</H2>
    <UL>
      <LI><A HREF="HTMLlat1.ent">Latin-1 Entities</A></LI>
      <LI><A HREF="HTMLsymbol.ent">Symbols and Greek Letters</A></LI>
      <LI><A HREF="HTMLspecial.ent">Other Special Characters</A></LI>
    </UL>
  </LI>
</UL>

When used with MENU and DIR, LI may not contain block-level elements, and lists cannot be nested.

TYPE

The deprecated TYPE attribute of LI suggests the rendering of the list item marker. Possible values are as follows:

  • Case-insensitive values for LI within a UL, DIR, or MENU:
    • disc (a filled-in circle)
    • square (a square outline)
    • circle (a circle outline)
  • Case-sensitive values for LI within an OL:
    • 1 (decimal numbers: 1, 2, 3, 4, 5, ...)
    • a (lowercase alphabetic: a, b, c, d, e, ...)
    • A (uppercase alphabetic: A, B, C, D, E, ...)
    • i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
    • I (uppercase Roman numerals: I, II, III, IV, V, ...)

Style sheets provide greater flexibility in suggesting list item styles. The list-style property of CSS includes the added abilities to suppress list item markers, use images as markers, and more.

VALUE

LI's VALUE attribute specifies the number of the list item when used with an OL. The number must be given as an integer, though the list item marker may be rendered in another form (for example, as a Roman numeral). Any LI element following in the same list will take its default sequence number based on the first preceding VALUE attribute. VALUE is deprecated in HTML 4.0, but no substitute currently exists in CSS.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LI in W3C HTML 4.0 Recommendation
  • LI in W3C HTML 3.2 Recommendation
  • LI in HTML 2.0 Standard
  • LI in WDG HTML 3.2 Reference
  • LI in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


LINK - Document Relationship

Syntax

<LINK>

Attribute Specifications

REL=LinkTypes (relationship to link)
REV=LinkTypes (relationship from link)
HREF=url (hypertext reference)
TYPE=ContentType (content-type of link)
TARGET=FrameTarget (frame to render link in)
MEDIA=MediaDesc (media appropriate for link)
HREFLANG=LanguageCode (language of link)
CHARSET=Charset (character encoding of link)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents
Empty
Contained in

HEAD

Description

The LINK element defines document relationships. Any number of LINK elements may be contained in the HEAD of a document. Many browsers lack support for LINK, so authors should not depend on the browser making the links available to the user.

REL, REV, TYPE & HREF

The REL and REV attributes define the nature of the relationship between the documents and the linked resource. REL defines a link relationship from the current document to the linked resource while REV defines a relationship in the opposite direction. For example,

<LINK REL=Glossary HREF="foo.html">

indicates that foo.html is a glossary for the current document while

<LINK REV=Subsection HREF="bar.html">

indicates that the current document is a subsection of bar.html. The value of the REL and REV attributes is a space-separated list of link types.

Commonly used relationships include the next or previous document in a sequence, the starting page in a collection of documents, a document with copyright information, and information about the author. A document could define these relationships as follows:

<LINK REL=Prev HREF="base.html" TITLE="BASE - Document Base url">
<LINK REL=Next HREF="meta.html" TITLE="META - Metadata">
<LINK REL=Start HREF="" TITLE="HTML 4.0 Reference">
<LINK REL=Copyright HREF="/copyright.html" TITLE="Copyright Notice">
<LINK REV=Made HREF="mailto:liam@htmlhelp.com" TITLE="HTML 4.0 Reference Feedback">

While the value of REL and REV is case-insensitive, the Lynx browser renders the relationship exactly as given by the author. Authors should therefore be consistent in their case, and may wish to capitalize the first letter while using lowercase for the rest.

Authors can also use the LINK element to apply an external style sheet. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute indicates a persistent style.

A preferred style is one that is automatically applied. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet". The user could choose to replace the preferred style sheet with an alternate one, though current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, each style sheet's LINK must use the same TITLE.

MEDIA

LINK's MEDIA attribute specifies the media for which the linked resource is designed. With REL=StyleSheet, this allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers. The attribute's value is a comma-separated list of media descriptors. The following media descriptors are defined in HTML 4.0 and are case-sensitive:

  • screen (the default), for non-paged computer screens;
  • tty, for fixed-pitch character grid displays (such as the display used by Lynx);
  • tv, for television-type devices with low resolution and limited scrollability;
  • projection, for projectors;
  • handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
  • print, for output to a printer;
  • braille, for braille tactile feedback devices;
  • aural, for speech synthesizers;
  • all, for all devices.

Netscape Navigator 4.x incorrectly ignores any style sheet linked with a MEDIA value other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. Most other browsers ignore the MEDIA attribute.

HREFLANG & CHARSET

The optional HREFLANG and CHARSET attributes of LINK give the language and character encoding, respectively, of the link. The language should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Examples of character encodings include ISO-8859-1, SHIFT_JIS, and UTF-8.

The Alternate link relationship defines an alternate version of the document. Translations of a page can be identified by using REL=Alternate along with the HREFLANG attribute. Versions of the page tailored for specific media can be provided by combining REL=Alternate with the MEDIA attribute. Some examples follow:

<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
<LINK REL=Alternate HREF="index.ja.html" HREFLANG=ja CHARSET="SHIFT_JIS" TITLE="Japanese version">
<LINK REL=Alternate HREF="/distribution/html40.pdf" TYPE="application/pdf" MEDIA=print TITLE="PDF version">

Note that the LANG and DIR attributes apply to the text of the TITLE attribute, not to the content of the link.

TARGET

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LINK in W3C HTML 4.0 Recommendation
  • LINK in W3C HTML 3.2 Recommendation
  • LINK in HTML 2.0 Standard
  • LINK in WDG HTML 3.2 Reference
  • LINK in Learning HTML 3.2 by Examples
  • Metadata at W3C
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


MAP - Image Map

Syntax

<MAP>...</MAP>

Attribute Specifications

NAME=CDATA (name of map)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more block-level elements or one or more AREA elements

Contained in

Inline elements, block-level elements

Description

The MAP element defines a client-side image map for use with an IMG or OBJECT. MAP's required NAME attribute is used as an anchor for the USEMAP attribute of the IMG or OBJECT. While a MAP element can define image maps embedded in other files, browsers typically only support client-side image maps with the MAP in the same file as the image.

MAP was originally defined to take one or more AREA elements that specified the coordinates of a clickable region on the image. An example follows:

<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

HTML 4.0 extends the MAP element to take one or more block-level elements as an alternative to using AREA elements. Combined with the OBJECT element, this allows rich alternative content for those not loading images. However, due to poor and buggy browser support for OBJECT, client-side image maps through the IMG element are more reliable.

When MAP is given within an OBJECT, its contents are not rendered on image-loading browsers. MAP may also be used outside the OBJECT element so that its contents are rendered.

The following example gives two images, one an alternate if the first type of image is not supported. The images share a single image map definition, which is included within the OBJECT element. The MAP element contains a menu of links to be rendered on browsers not loading images.

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

NAME

Defines the name of the Image Map.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • MAP in W3C HTML 4.0 Recommendation
  • MAP in W3C HTML 3.2 Recommendation
  • MAP in WDG HTML 3.2 Reference
  • MAP in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


MENU - Menu List

Syntax

<MENU>...</MENU>

Attribute Specifications

COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements that cannot contain block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The MENU element defines a menu list. The element contains one or more LI elements that define the actual items of the list. The LI elements must not contain block-level elements, which prevents MENUs from being nested.

MENU is deprecated in HTML 4.0 in favor of UL.

COMPACT

The COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • MENU in W3C HTML 4.0 Recommendation
  • MENU in W3C HTML 3.2 Recommendation
  • MENU in HTML 2.0 Standard
  • MENU in WDG HTML 3.2 Reference
  • MENU in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


META - Metadata

Syntax

<META>

Attribute Specifications

NAME=Name (property name)
HTTP-EQUIV=Name (HTTP response header name)
CONTENT=CDATA (associated data)
SCHEME=CDATA (form of data)
internationalization attributes (for the CONTENT)

Contents

Empty

Contained in

HEAD

Description

The META element provides metadata such as a document's keywords, description, and author. Any number of META elements may be contained in the HEAD of a document.

There is no standard list of META properties, so authors may define whatever metadata they like. The following example defines the author of the document:

<META NAME=author CONTENT="Liam Quinn">

Some search engines use keywords and description properties, giving extra weight to a document's keywords and providing its description with the link to the document. Example:

<META NAME="description" CONTENT="A description of HTML 4.0's META element for metadata.">
<META NAME="keywords" CONTENT="META, meta element, metadata, metainformation, meta data, meta information, keywords, description, refresh, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, &lt;meta&gt; tag, &lt;META&gt; tag">

To avoid being truncated by search engines, the description should be brief--no more than 200 characters. Keywords are separated by commas and may be considered case sensitive by search engines. If the same keywords are repeated too often in the META element, some search engines will not index the document. Search engines typically only process the first 1000 characters of the keywords list.

Some search engines also support the robots property for indicating whether a document should be indexed and whether its links should be followed. The associated CONTENT value is a comma-separated list of case-insensitive directives:

  • index specifies that the page should be indexed while noindex specifies that it should not be indexed;
  • follow specifies that the page's links should be followed while nofollow specifies that they should not be followed;
  • all is equivalent to index,follow (the default value);
  • none is equivalent to noindex,nofollow.

NAME & CONTENTS

META's NAME attribute provides a property name while the CONTENT attribute gives the corresponding value. The CONTENT attribute value may contain text and entities, but it may not contain HTML tags.

SCHEME

The optional SCHEME attribute gives the format of the property value. For example, a date property may require SCHEME="Month-Day-Year" to disambiguate the date from other formats such as SCHEME="Day-Month-Year".

HTTP-EQUIV

The HTTP-EQUIV attribute may be used in place of the NAME attribute to indicate that the property is an HTTP header. Some servers will send the HTTP header specified in the META element, and browsers often recognize the header even when it is not sent by the server. Examples:

<META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16:18:35 GMT">
sets the expiry date of the document.
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
sets the client-side scripting language for inline scripts to JavaScript.
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
sets the style language for inline styles to CSS.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
sets the character encoding for the document to SHIFT_JIS (a Japanese encoding). Note that using META for this purpose rather than a true HTTP header causes some browsers to redraw the page after initially displaying it.
<META HTTP-EQUIV=Refresh CONTENT="10; URL=http://www.htmlhelp.com/">
tells the browser to load http://www.htmlhelp.com/ 10 seconds after the current document has finished loading. Not all browsers support this, so authors should provide an alternate means of moving to the new page where necessary. The Refresh header is sometimes used for "splash screens" or when a page has moved, but the technique is not very effective since users may not even be looking at the window that is to be refreshed and since it messes up the user's history on many browsers. Some search engines penalize pages that use a Refresh of a few seconds or less.

Example

For example, the following META element tells search engines and other robots not to index the page but to follow links on it:

<META NAME=robots CONTENT="noindex,follow">

Few search engines support the robots property at this time. For greater compliance by robots, authors should use the Robots Exclusion Protocol if possible.

More Information

  • META in W3C HTML 4.0 Recommendation
  • META in W3C HTML 3.2 Recommendation
  • META in HTML 2.0 Standard
  • META in WDG HTML 3.2 Reference
  • META in Learning HTML 3.2 by Examples
  • Metadata at W3C
  • The META tag: Controlling how your Web page is indexed by AltaVista
  • Infoseek Submitting Tips
  • HotBot FAQ: Descriptions, Titles, Keywords, and <meta> Tags
  • Lycos Help: Robots Meta Tag
  • Robots Exclusion
    • HTML Author's Guide to the Robots META tag
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


NOFRAMES - Frames Alternate Content

Syntax

<NOFRAMES>...<NOFRAMES>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

  • In HTML 4.0 Transitional: inline elements, block-level elements
  • In HTML 4.0 Frameset: one BODY element that must not contain any NOFRAMES elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, FRAMESET, IFRAME, INS, LI, MAP, NOSCRIPT, OBJECT, TD, TH

Description

The NOFRAMES element contains content that should only be rendered when frames are not displayed. NOFRAMES is typically used in a Frameset document to provide alternate content for browsers that do not support frames or have frames disabled.

When used within a FRAMESET, NOFRAMES must contain a BODY element. There must not be any NOFRAMES elements contained within this BODY element.

A meaningful NOFRAMES element should always be provided in a Frameset document and should at the very least contain links to the main frame or frames. NOFRAMES should not contain a message telling the user to upgrade his or her browser. Some browsers support frames but allow the user to disable them.

Various methods of automatically creating non-frames content exist. See Frames design guidelines: automatic no-frames content for more details.

An example follows:

<FRAMESET ROWS="*,100">
  <FRAMESET COLS="40%,*">
    <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
    <FRAME NAME="Content" SRC="main.html" TITLE="Content">
  </FRAMESET>
  <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
      <UL>
        <LI>
          <A HREF="reference/html40/">HTML 4.0 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?">
      </P>
    </BODY>
  </NOFRAMES>
</FRAMESET>

In HTML 4.0 Transitional, the NOFRAMES element is also permitted within most block-level elements. This allows authors to include content, such as navigation aids, that should only be displayed if the document is not being viewed within a frameset. Such use helps to ensure that a frame could stand on its own if bookmarked or accessed through a search engine while not burdening the frames user with duplicate content. However, most browsers do not support this use of NOFRAMES and will always display the content.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • NOFRAMES in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


NOSCRIPT - Non-script Content

Syntax

<NOSCRIPT>...</NOSCRIPT>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Block-level elements , inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The NOSCRIPT element provides alternate content for a client-side script that was not executed. A script will fail to execute if the browser does not support the scripting language or if the user has disabled client-side scripting. NOSCRIPT should follow the SCRIPT element for which it provides alternate content.

Note that most browsers will fail to render the contents of NOSCRIPT if the scripting language is not supported and the user has enabled client-side scripting. Most browsers will only render NOSCRIPT when the user has disabled client-side scripting.

Also note that Netscape Navigator 2.x supports JavaScript 1.0 but still renders all NOSCRIPT content.

Since client-side scripts usually provide dynamic interactivity that cannot be replaced by static content, the NOSCRIPT element is generally not useful. Authors should try to use client-side scripts as optional enhancements that are not integral components of the Web page. In the case of form validation, any error checking done by the client-side script should be repeated by the CGI script or Java servlet that handles the submission at the server.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • NOSCRIPT in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


OBJECT - Embedded Object

Syntax

<OBJECT>...</OBJECT>

Attribute Specifications

DATA=url (object data)
CLASSID=url (location of implementation)
ARCHIVE=CDATA (archive files)
CODEBASE=url (base url for CLASSID, DATA, ARCHIVE)
WIDTH=Length (object width)
HEIGHT=Length (object height)
NAME=CDATA (name for form submission)
USEMAP=url (client-side image map)
TYPE=ContentType (content-type of object)
CODETYPE=ContentType (content-type of code)
STANDBY=Text (message to show while loading)
TABINDEX=NUMBER (position in tabbing order)
DECLARE (do not instantiate object)
ALIGN=[ top | middle | bottom | left | right ] (object alignment)
BORDER=Length (link border width)
HSPACE=Pixels (horizontal gutter)
VSPACE=Pixels (vertical gutter)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

PARAM elements followed by block-level elements and/or inline elements

Contained in

HEAD, inline elements, block-level elements except PRE

Description

The OBJECT element is used to include objects such as images, videos, Java applets, and VRML worlds. OBJECT is intended to replace the more specific IMG and APPLET elements, as well as the proprietary EMBED and BGSOUND elements, though a lack of browser support and severe bugs in supporting browsers make the other elements a better choice for the time being.

DATA & CODEBASE

OBJECT's DATA attribute specifies the url of the embedded object. Relative urls are interpreted with respect to the CODEBASE attribute if it is given.

WIDTH & HEIGHT

The WIDTH and HEIGHT attributes define the dimensions of the object. The value may be given in pixels or as a percentage of the parent element's width or height. Most browsers require the WIDTH and HEIGHT attributes for all objects embedded using OBJECT.

CLASSID

The CLASSID may be used to specify an implementation for the object. Java applets, Python applets, and ActiveX controls all provide implementations for the embedded object, and so are specified with the CLASSID attribute, as in the following example:

<OBJECT CLASSID="yahtzee.py" CODETYPE="application/x-python" STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT DATA="yahtzee.gif" TYPE="image/gif" TITLE="A Yahtzee animation" WIDTH=200 HEIGHT=100>
Yahtzee is my <EM>favorite</EM> game!
</OBJECT>
</OBJECT>
</OBJECT>

This example also demonstrates the use of alternate content for browsers that cannot display the embedded object. In the example, a Yahtzee game written in Python is used if the browser supports it. A Java version is provided as an alternate for browsers that do not support Python applets. An image is given for browsers that cannot show the Java or Python applets, and plain text is used as a final alternate if images are not loaded. Note that OBJECT is backwards compatible with pre-HTML 4.0 browsers since they will ignore the <OBJECT> tags and render the innermost alternate content (the text in the example).

TYPE & CODETYPE

The preceding example also makes use of the TYPE and CODETYPE attributes to allow browsers to avoid requesting a file that they cannot render. The TYPE attribute specifies the media type of the resource referenced by the DATA attribute while the CODETYPE attribute specifies the media type of the CLASSID data.

STANDBY

The STANDBY attribute is also utilized in the example. This attribute provides short text to display while the object is loading.

ARCHIVE

The ARCHIVE attribute can specify a space-separated list of archived files (either absolute urls or urls relative to the CODEBASE), allowing the browser to download many files with a single connection and hence decreasing the total download time. The standard archive format for Java files is JAR. JAR files can be created with the jar tool included with the Java Development Kit 1.1 and up.

DECLARE

The DECLARE attribute makes the object a declaration that is not immediately instantiated. This allows the object to be instantiated from a link, button, or object later in the same document. The ID attribute must be used with declared objects as an identifier for the instantiating element. For example:

<OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="You get the dice!" TITLE="Yahtzee animation">
</OBJECT>
...
<P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P>

PARAM

The OBJECT element may contain PARAM elements--before any other content--to provide run-time initialization data. The following example embeds a video, with an audio clip for alternate content, and includes parameters commonly understood by audio/video plug-ins. Note the placement of PARAM elements before alternate content.

<OBJECT DATA="mlk.mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech" WIDTH=150 HEIGHT=150>
<PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/">
<PARAM NAME=autoplay VALUE=true>
<OBJECT DATA="mlk.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech">
<PARAM NAME=autostart VALUE=true>
<PARAM NAME=hidden VALUE=true>
<A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A>
</OBJECT>
</OBJECT>

USEMAP

The USEMAP attribute can be used with OBJECT to embed a clickable image where different coordinates have different link destinations. Image maps via the IMG element are better supported, but OBJECT-based image maps allow a full textual alternative for browsers not loading images. The USEMAP attribute points to a MAP element whose contents define the links of the various coordinates. The MAP may be included within the OBJECT, in which case its contents are not rendered on image-loading browsers, or it may be given outside the OBJECT element so that its contents are rendered.

The following example gives two images, one an alternate if the first type of image is not supported. The images share a single image map definition, which is included within the OBJECT element. The MAP element contains a menu of links to be rendered on browsers not loading images.

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. An object with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

ALIGN

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the object. The values top, middle, and bottom specify the object's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the object with the current baseline. To center the object horizontally on the page, place the object in a centered block, e.g.,

<P ALIGN=center><OBJECT DATA="foo.mov" TYPE="video/quicktime"></OBJECT></P>

The other ALIGN values, left and right, specify a floating object; the object is placed at the left or right margin and content flows around it. To place content below the object, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning objects.

BORDER

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the object's border. Specifying BORDER=0 will eliminate the border around a linked object in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the object would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A HREF="reference/"><OBJECT DATA="icon/reference.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT>Web Authoring Reference</A>

HSPACE & VSPACE

The deprecated HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the object. The value must be in pixels and applies to both sides of the object. Style sheets provide more flexibility in specifying the space around objects.

OBJECT

The OBJECT element is most useful as a BODY element and can be contained within either inline or block-level elements. The contents of OBJECT should be elements that can be contained within OBJECT's parent element. For example, an A element containing an OBJECT should not have any block-level elements as the contents of the OBJECT.

NAME

"This provides a way for user agents which support FORMs to determine whether an object within a FORM block should participate in the "submit" process. If NAME is specified and the DECLARE attribute is absent, then the user agent should include the value of the NAME attribute and data obtained from the object along with the information derived from other form fields. The mechanism used to obtain the object's data is specific to each object system." (W3)

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OBJECT in W3C HTML 4.0 Recommendation
  • The Java Tutorial
  • ActiveX Controls
  • Python Language Home Page
  • PNG (Portable Network Graphics) Home Page
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


OL - Ordered List

Syntax

<OL>...</OL>

Attribute Specifications

TYPE=[ 1 | a | A | i | I ] (numbering style)
START=Number (starting number)
COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The OL element defines an ordered list. The element contains one or more LI elements that define the actual items of the list.

Unlike with an unordered list (UL), the items of an ordered list have a definite sequence. Items in an ordered list are numbered by the browser.

TYPE

The deprecated TYPE attribute of OL suggests the numbering style on visual browsers. The case-sensitive values are as follows:

  • 1 (decimal numbers: 1, 2, 3, 4, 5, ...)
  • a (lowercase alphabetic: a, b, c, d, e, ...)
  • A (uppercase alphabetic: A, B, C, D, E, ...)
  • i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
  • I (uppercase Roman numerals: I, II, III, IV, V, ...)

The numbering style on an individual list item can be suggested using the TYPE attribute of LI. The list-style-type property of CSS provides greater flexibility in suggesting numbering styles.

START

The deprecated START attribute suggests the starting number for the list and defaults to 1. The value of START must be an integer, but the number may be presented in a different form (for example, as a Roman numeral). While this attribute is deprecated, there is currently no substitute for it in Cascading Style Sheets.

COMPACT

The deprecated COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OL in W3C HTML 4.0 Recommendation
  • OL in W3C HTML 3.2 Recommendation
  • OL in HTML 2.0 Standard
  • OL in WDG HTML 3.2 Reference
  • OL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


OPTGROUP - Option Group

Syntax

<OPTGROUP>...</OPTGROUP>

Attribute Specifications

LABEL=Text (group label)
DISABLED (disable group of choices)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more OPTION elements

Contained in

SELECT

Description

The OPTGROUP element defines a group of choices within a SELECT menu. OPTGROUP must contain one or more OPTION elements to define the actual choices.

LABEL

The required LABEL attribute specifies the group label presented to the user. The LABEL should describe the group of choices available through the OPTGROUP's OPTIONs. Each OPTION generally uses a LABEL attribute as well to provide a shortened label that, together with the OPTGROUP's LABEL, gives a complete description of the option. An example follows:

<P>Which Web browser do you use most often?
  <SELECT NAME=browser>
    <OPTGROUP LABEL="Netscape Navigator">
      <OPTION LABEL="4.x or higher">
        Netscape Navigator 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
      <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>
      <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="4.x or higher">
        Microsoft Internet Explorer 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
      <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
      <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
      <OPTION LABEL="2.x">Opera 2.x</OPTION>
    </OPTGROUP>
    <OPTION>Other</OPTION>
  </SELECT>
</P>

OPTGROUP is not well supported by current browsers, but its design allows authors to use it today without sacrificing compatibility with non-supporting browsers. Supporting browsers will render the preceding example using the LABEL attribute of OPTION to provide just the version number, along with the OPTGROUP's LABEL, which gives the full name of the application. This allows a compact display with easy-to-use cascading menus.

Non-supporting browsers will ignore the OPTGROUP elements and LABEL attributes, providing the full name and version for each choice. Thus authors can fully use OPTGROUP despite its lack of browser support.

Note that, in HTML 4.0, OPTGROUP is limited to containing only OPTION elements, thus preventing nested OPTGROUPs with multi-level cascades. Future versions of HTML may add support for nested option groups.

DISABLED

The boolean DISABLED attribute makes the option group unavailable. The options of a disabled option group cannot be selected by the user and are never submitted with the form.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OPTGROUP in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


OPTION - Menu Option

Syntax

<OPTION>...</OPTION>

Attribute Specifications

VALUE=CDATA (value of option)
SELECTED (choice initially selected)
DISABLED (disable choice)
LABEL=Text (option label)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Plain text (including entities)

Contained in

SELECT, OPTGROUP

Description

The OPTION element defines a menu choice within a SELECT menu.

VALUE

The value of the option, sent with a submitted form, is specified with the VALUE attribute. In the absence of a VALUE attribute, the value is the content of the OPTION element.

SELECTED

The boolean SELECTED attribute defines the OPTION to be initially selected. A SELECT element can only have one OPTION selected at any time unless the MULTIPLE attribute is present on SELECT.

If the SELECT element does not use the MULTIPLE or SIZE attributes, some browsers will automatically (and incorrectly) select an option. To ensure that a suitable option is selected, authors may wish to use the SELECTED attribute on an OPTION. If no option is a suitable default, consider using a dummy option, as in the following example:

<SELECT NAME="marital_status">
<OPTION SELECTED VALUE="">Select...</OPTION>
<OPTION>Single</OPTION>
<OPTION>Married</OPTION>
<OPTION>Separated</OPTION>
<OPTION>Divorced</OPTION>
<OPTION>Widowed</OPTION>
</SELECT>

DISABLED

The boolean DISABLED attribute, new in HTML 4.0 and poorly supported by current browsers, makes the OPTION element unavailable. A disabled option cannot be selected by the user and is never submitted with the form.

LABEL

The LABEL attribute specifies the option label presented to the user. This defaults to the content of the OPTION element, but the LABEL attribute allows authors to more easily use OPTGROUP without sacrificing compatibility with browsers that do not support option groups. The following example illustrates the technique:

<P>Which Web browser do you use most often?
  <SELECT NAME=browser>
    <OPTGROUP LABEL="Netscape Navigator">
      <OPTION LABEL="4.x or higher">
        Netscape Navigator 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
      <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>
      <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="4.x or higher">
        Microsoft Internet Explorer 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
      <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
      <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
      <OPTION LABEL="2.x">Opera 2.x</OPTION>
    </OPTGROUP>
    <OPTION>Other</OPTION>
  </SELECT>
</P>

OPTGROUP and OPTION's LABEL attribute were introduced together, so browsers should support both features or neither of them. Supporting browsers will render the preceding example using the LABEL attribute of OPTION to provide just the version number, along with the OPTGROUP's LABEL, which gives the full name of the application. This allows a compact display with cascading menus, but many browsers do not yet support OPTGROUP. These browsers will ignore the OPTGROUP elements and LABEL attributes, providing the full name and version for each choice. Thus authors can fully use OPTGROUP despite its lack of browser support.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OPTION in W3C HTML 4.0 Recommendation
  • OPTION in W3C HTML 3.2 Recommendation
  • OPTION in HTML 2.0 Standard
  • OPTION in WDG HTML 3.2 Reference
  • OPTION in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


P - Paragraph

Syntax

<P>...</P>

Attribute Specifications

ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The P element defines a paragraph. The closing tag for P is optional, but its use prevents common browser bugs with style sheets. Note that P cannot contain block-level elements such as TABLE and ADDRESS.

ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the content of the paragraph on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting paragraph alignment.

HTML does not specify a presentation for the P element. Visual browsers commonly use block paragraphs with no first-line indent and separated by a blank line, but some browsers allow the user to specify a different presentation. An author can suggest paragraph indentation and spacing using style sheets. The following CSS ruleset suggests a possible presentation for paragraphs:

P { margin-top: 0; text-indent: 5% }

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • P in W3C HTML 4.0 Recommendation
  • P in W3C HTML 3.2 Recommendation
  • P in HTML 2.0 Standard
  • P in WDG HTML 3.2 Reference
  • P in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


PARAM - Object Parameter

Syntax

<PARAM>

Attribute Specifications

NAME=CDATA (property name)
VALUE=CDATA (property value)
VALUETYPE=[ data | ref | object ] (type of value)
TYPE=ContentType (content-type of value resource)
[4.0] ID=string

Contents

Empty

Contained in

APPLET, OBJECT

Description

The PARAM element provides parameters for the OBJECT and APPLET elements. An OBJECT or APPLET may contain any number of PARAM elements prior to the alternate content that is also contained within the OBJECT or APPLET element.

NAME

The required NAME attribute of PARAM gives the name of the parameter while the VALUE attribute gives the parameter's value. The parameters recognized are specific to the kind of object being embedded or to the plug-in that renders the embedded object. For example, a clock applet may accept parameters to specify the style of the clock and the colors to use:

<OBJECT CLASSID="java:Clock.class" CODETYPE="application/java" WIDTH=100 HEIGHT=100 TITLE="A real live clock!" STANDBY="Do you know what time it is?">
<PARAM NAME=TYPE VALUE=ANALOG>
<PARAM NAME=BGCOLOR VALUE=WHITE>
<PARAM NAME=FGCOLOR VALUE=NAVY>
</OBJECT>

Note that the PARAM elements used in the preceding example would not change if the APPLET element were used in place of OBJECT.

Objects such as videos, audio clips, and VRML worlds are typically handled by browser plug-ins. Each plug-in recognizes certain parameters, which can make choosing parameters difficult when the author does not know which plug-in the user has. However, unsupported parameters should be safely ignored. The following example uses parameters specific to the QuickTime movie plug-in as well as parameters specific to the LiveAudio audio plug-in:

<OBJECT DATA="mlk.mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech" WIDTH=150 HEIGHT=150>
<PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/">
<PARAM NAME=autoplay VALUE=true>
<OBJECT DATA="mlk.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech">
<PARAM NAME=autostart VALUE=true>
<PARAM NAME=hidden VALUE=true>
<A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A>
</OBJECT>
</OBJECT>

Note that only the parameters specified within the OBJECT and prior to the alternate content are passed onto the plug-in, so that the pluginspage and autoplay parameters are used if the QuickTime movie is played while the autostart and hidden parameters are used if the audio clip is played.

VALUETYPE, VALUE & TYPE

The VALUETYPE parameter of PARAM designates the type of the VALUE attribute. The default value for VALUETYPE is data, which indicates that the VALUE attribute contains a string.

The ref value for VALUETYPE indicates that the VALUE attribute contains a url where run-time values are stored. The Internet media type of the resource is specified by the TYPE attribute. The following example uses values with VALUETYPE=ref to specify the location of images to animate and a sound to play durlng the animation:

<OBJECT CLASSID="java:Animator.class" CODETYPE="application/java" WIDTH=200 HEIGHT=300 TITLE="Wedding Photos">
<PARAM NAME=IMAGE1 VALUE="images/wedding/bride.jpg" VALUETYPE=ref TYPE="image/jpeg">
<PARAM NAME=IMAGE2 VALUE="images/wedding/groom.jpg" VALUETYPE=ref TYPE="image/jpeg">
<PARAM NAME=IMAGE3 VALUE="images/wedding/cake.jpg" VALUETYPE=ref TYPE="image/jpeg">
<PARAM NAME=SOUND VALUE="http://www.htmlhelp.com/sounds/weddingmarch.au" VALUETYPE=ref TYPE="audio/basic">
</OBJECT>

The url specified by VALUE is passed to the object without being resolved to a full URL. In the preceding example, the Java class would be responsible for resolving and fetching the contents of partial urls like "images/wedding/cake.jpg".

VALUETYPE also takes an object value, for use when a VALUE attribute specifies an identifier of a separate OBJECT in the document. The following example features a hypothetical application for interactively walking through the frames of an animated GIF. The GIF is loaded in a separate OBJECT from the application that uses it.

<OBJECT DECLARE ID=mygif DATA="animation.gif" TYPE="image/gif">
</OBJECT>
<OBJECT CLASSID="framepicker">
<PARAM NAME=image VALUE="#mygif" VALUETYPE=object>
<IMG SRC="animation.gif" ALT="[Example of an animated GIF]">
</OBJECT>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

More Information

  • PARAM in W3C HTML 4.0 Recommendation
  • PARAM in W3C HTML 3.2 Recommendation
  • PARAM in WDG HTML 3.2 Reference
  • PARAM in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


PRE - Preformatted Text

Syntax

<PRE>...</PRE>

Attribute Specifications

WIDTH=Number (line width)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements except IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP , FONT, BASEFONT

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-pitch font, should not collapse whitespace, and should not wrap long lines.

PRE is useful for formatting computer code or poetry where whitespace is important, but since preformatted text is inherently visual, authors should avoid dependence on it wherever possible. When using PRE, authors should avoid altering the element's fixed-pitch font or non-collapsing whitespace properties by means of style sheets.

The following example features Java code in a PRE element:

<PRE><CODE CLASS=Java>
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}
</CODE></PRE>

The code in the preceding example would be more difficult to read if it were not preformatted, and so PRE is used to provide the proper spacing. Note that the CODE element is also included to add structural information.

WIDTH

The deprecated WIDTH attribute of PRE tells the browser the expected line length of the preformatted block so that a suitable font size or margin can be used. Browsers ignore this attribute in practice.

Note

The bidirectional algorithm that determines the directionality of text still applies within the PRE element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • PRE in W3C HTML 4.0 Recommendation
  • PRE in W3C HTML 3.2 Recommendation
  • PRE in HTML 2.0 Standard
  • PRE in WDG HTML 3.2 Reference
  • PRE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


Q - Short Quotation

Syntax

<Q>...</Q>

Attribute Specifications

CITE=url (source of quotation)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The Q element is used for short, inline quotations. For longer (block) quotations, use the BLOCKQUOTE element.

CITE

The Q element's optional CITE attribute provides a url of the source of the quotation. Some examples follow:

Example

<P>In the words of Albert Einstein, <Q>God does <EM>not</EM> play dice.</Q></P>

<P>According to Dave Raggett, <Q CITE="http://www.w3.org/Press/HTML4-REC">HTML 4.0 gives Web designers the ability to create dynamic visually exciting pages that are accessible to all.</Q></P>

Note that authors should not include their own quotation marks when using the Q element. However, this can be a problem since almost all current browsers lack support for Q. Authors may prefer to avoid Q and insert their own quotation marks. Another alternative is to use I in combination with Q so that the quotation is distinguished from other text in most browsers. The previous example could also be given as follows:

<P>According to Dave Raggett, <I><Q CITE="http://www.w3.org/Press/HTML4-REC">HTML 4.0 gives Web designers the ability to create dynamic visually exciting pages that are accessible to all.</Q></I></P>

Browsers supporting Q should properly handle nested quotations. They should also use quotation marks suitable to the language of the quotation, based on the LANG attribute of Q or the language of its parent.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Q in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


S - Strike-through Text

Syntax

<S>...</S>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The S element, deprecated in HTML 4.0, suggests that text be rendered with a strike-through style. In many cases, use of a phrase element such as DEL is more appropriate since such elements express the meaning of the text more clearly. However, since support for DEL among browsers is weak, S could be useful in combination with DEL, as in the following example:

The latest version of HTML recommended by the W3C is HTML <DEL DATETIME="1997-12-19T00:00:00-05:00"><S>3.2</S></DEL> <INS DATETIME="1997-12-19T00:00:00-05:00">4.0</INS>.

Note that STRIKE is better supported than S (based on Netscape 2.x and 1.22 supporting STRIKE but not S), and so STRIKE should be used in place of S. There does not appear to be any advantage to using both STRIKE and S; all browsers that support S also seem to support STRIKE.

If DEL is not a suitable structure, style sheets should be used to complement or replace instances of S. CSS1 provides the text-decoration property for strike-through text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • S in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


SAMP - Sample Output

Syntax

<SAMP>...</SAMP>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SAMP element denotes sample output, such as from a program or script. Visual browsers typically render SAMP as monospaced text, but authors can suggest a rendering using style sheets. Since SAMP is a structural element, it carries meaning, making it preferable to font style elements such as TT when marking up sample output.

Example:

<P>When an undefined element is used in an HTML document, a validator will give an error like the following:</P>
<P><SAMP>C:\SP\BIN\NSGMLSU.EXE:test.html:4:7:E: element "FOOBAR" undefined</SAMP></P>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SAMP in W3C HTML 4.0 Recommendation
  • SAMP in W3C HTML 3.2 Recommendation
  • SAMP in HTML 2.0 Standard
  • SAMP in WDG HTML 3.2 Reference
  • SAMP in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


SCRIPT - Client-side Script

Syntax

<SCRIPT>...</SCRIPT>

Attribute Specifications

TYPE=ContentType (content-type of scripting language)
LANGUAGE=CDATA (scripting language name)
SRC=url (external script location)
CHARSET=Charset (character encoding of external script)
DEFER (script execution may wait)

Contents

An embedded script

Contained in

HEAD, inline elements, block-level elements

Description

The SCRIPT element includes a client-side script in the document. Client-side scripts allow greater interactivity in a document by responding to user events. For example, a script could be used to check the user's form input prior to submission to provide immediate notice of any errors by the user.

Note that not all browsers support client-side scripting, and supporting browsers allow the user to disable scripting, so authors should avoid dependence on client-side scripting wherever possible. The NOSCRIPT element can be used to provide content for browsers that do not support client-side scripting or have it disabled. In the case of form validation, any error checking done by the client-side script should be repeated by the CGI script or Java servlet that handles the submission at the server.

Also note that different browsers support different variants of scripting languages with different bugs. Authors are encouraged to check their scripts on as many browsers as possible. Browsers that support client-side scripting include Netscape Navigator 2.0 and up, Microsoft Internet Explorer 3.0 and up, and Opera 3.0 and up.

TYPE

The required TYPE attribute of SCRIPT specifies the media type of the scripting language, e.g., text/javascript. However, most browsers only support the deprecated LANGUAGE attribute, which specifies the language name. Examples of supported LANGUAGE values include JavaScript, JavaScript1.1, and VBScript. The values are not case sensitive.

LANGUAGE

Browsers will ignore scripts with LANGUAGE values that they do not support. For example, Netscape Navigator 3.0 will execute scripts with LANGUAGE="JavaScript" or LANGUAGE="JavaScript1.1" but will ignore scripts with LANGUAGE="JavaScript1.2" or LANGUAGE="VBScript".

In the absence of the LANGUAGE attribute, browsers typically assume that the language is JavaScript 1.0. As there is no established convention for indicating the version of JavaScript via the TYPE attribute, we recommend that authors continue to use LANGUAGE to specify the language and version where it differs from JavaScript 1.0.

SRC & CHARSET

An embedded script is given as the content of the SCRIPT element. The SRC attribute allows authors to reuse code by specifying an external script. The optional CHARSET attribute gives the character encoding of the external script (typically ISO-8859-1). If the browser is unable to fetch the external script it will execute any embedded script; otherwise it will ignore the embedded script. An example follows:

<SCRIPT TYPE="text/javascript" SRC="foo.js" CHARSET="ISO-8859-1">
<!--
  // embedded script, only executed if foo.js is unavailable
// -->
</SCRIPT>

Netscape Navigator requires that external scripts be served with a Content-Type of application/x-javascript.

DEFER

The DEFER attribute indicates that the browser may wait to parse the script until the rest of the document has been rendered. Scripts that use DEFER must not generate any document content, and should not be required to respond to user events (e.g., form submission) that may occur while the document is loading. The DEFER attribute can be useful for delaying scripts that pre-load images or harass the user with scrolling messages in the status bar, though current browsers do not generally support this attribute.

The SCRIPT element may occur any number of times in the document HEAD or BODY. Typically the SCRIPT element is used in the HEAD unless it generates BODY content.

Pre-HTML 3.2 browsers, unaware of the SCRIPT element, will treat the content of SCRIPT as normal HTML. To make these browsers ignore the SCRIPT's content, scripting languages generally allow SGML comments to be used around an embedded script. For example:

<SCRIPT TYPE="text/javascript">
<!-- comment to end of line
  document.write("foo");
// comment to end of line -->
</SCRIPT>

Note that "-->" is contained within a JavaScript single-line comment (started with two slashes).

Technically, the first occurrence of "</" followed by any letter is considered the end tag for the SCRIPT element. While browsers are forgiving in this, authors should avoid using strings such as "</P>" in their embedded scripts. JavaScript allows authors to use a backslash to avoid ending the SCRIPT element prematurely, e.g., document.write("<\/P>").

More Information

  • SCRIPT in W3C HTML 4.0 Recommendation
  • SCRIPT in W3C HTML 3.2 Recommendation
  • SCRIPT in WDG HTML 3.2 Reference
  • SCRIPT in Learning HTML 3.2 by Examples
  • JavaScript Guide
    • Embedding JavaScript in HTML
  • JavaScript Reference
  • JScript Web Page
  • VBScript Web Page
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


SELECT - Option Selector

Syntax

<SELECT>...</SELECT>

Attribute Specifications

NAME=CDATA (key in submitted form)
MULTIPLE (allow multiple selections)
SIZE=Number (number of visible options)
DISABLED (disable element)
TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONBLUR=Script (element lost focus)
ONFOCUS=Script (element received focus)
ONCHANGE=Script (element value changed)

Contents

One or more OPTGROUP or OPTION elements

Contained in

Block-level elements, inline elements except BUTTON

Description

The SELECT element defines a form control for the selection of options. While SELECT is most useful within a FORM, HTML 4.0 allows SELECT in any block-level or inline element other than BUTTON. However, Netscape Navigator will not display any SELECT elements outside of a FORM.

The SELECT element contains one or more OPTGROUP or OPTION elements to provide a menu of choices for the user. Each choice is contained within an OPTION element. Choices can be grouped logically through the OPTGROUP element.

NAME

SELECT's NAME attribute provides the key sent to the server with the value of the selected option.

MULTIPLE

By default, the user can only select one option. The boolean MULTIPLE attribute allows the user to select multiple options, which are submitted as separate name/value pairs. The following example uses the MULTIPLE attribute to allow the selection of one or more options:

<P>Select one or more sections to search:
<SELECT NAME=sections MULTIPLE>
<OPTION>Web Authoring Reference</OPTION>
<OPTION>FAQ Archives</OPTION>
<OPTION>Design Elements</OPTION>
<OPTION>Tools</OPTION>
<OPTION>Feature Article</OPTION>
</SELECT>
</P>

DISABLED

The boolean DISABLED attribute, new in HTML 4.0 and poorly supported by current browsers, makes the SELECT element unavailable. The user is unable to edit the disabled selection, no value is submitted with the form, the SELECT element cannot receive focus, and the element is skipped when navigating the document by tabbing.

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. A SELECT element with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

SIZE

The SIZE attribute of SELECT hints that visual browsers should display the element as a list box with the specified number of options visible at any time. A scroll bar would allow access to any non-visible options. The SIZE attribute is especially useful in SELECT elements with numerous OPTIONs and multiple selections allowed. In such a situation, some visual browsers will render the entire list in one large box without scrolling; a suitable SIZE attribute helps such browsers give a more appropriate presentation.

ONFOCUS, ONBLUR & ONCHANGE

The SELECT element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, SELECT accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus;
  • ONCHANGE, when the element loses focus and its value has changed since it received focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SELECT in W3C HTML 4.0 Recommendation
  • SELECT in W3C HTML 3.2 Recommendation
  • SELECT in HTML 2.0 Standard
  • SELECT in WDG HTML 3.2 Reference
  • SELECT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


SMALL - Small Font

Syntax

<SMALL>...</SMALL>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements except PRE

Description

The SMALL element suggests that text be rendered in a smaller font. Since HTML 4.0 has no element to indicate de-emphasis, SMALL is often useful for this purpose. For example:

<P><SMALL>Copyright © 1998 Liam Quinn. All rights reserved.</SMALL></P>

Most browsers support nested SMALL elements, but this practice should be avoided. Since different users have different font sizes and eyesight, significant changes in font size can leave text too small to read even though it may look fine to the author.

Using style sheets in place of SMALL provides greater flexibility in changing the presentation. The previous example could also be marked up as follows:

<P CLASS=copyright>Copyright © 1998 Liam Quinn. All rights reserved.</P>

This could then be linked to the following style sheet:

.copyright {
  font-size: smaller;
  text-align: center
}

@media aural {
  .copyright { volume: soft }
}

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SMALL in W3C HTML 4.0 Recommendation
  • SMALL in W3C HTML 3.2 Recommendation
  • SMALL in WDG HTML 3.2 Reference
  • SMALL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


SPAN - Generic Inline Container

Syntax

<SPAN>...</SPAN>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SPAN element is a generic inline container. SPAN carries no structural meaning itself, but it can be used to provide extra structure through its LANG, DIR, CLASS, and ID attributes. Style sheets are often used to suggest a presentation for a given class or ID.

SPAN should only be used where no other HTML inline element provides a suitable meaning. If a presentation such as bold or italic text would be suitable on visual browsers, authors may prefer to use an appropriate font style element. For example:

  1. <P><SPAN LANG=fr>La Révolution Tranquille</SPAN> shook Quebec in the early 1960's.
  2. <P><I LANG=fr>La Révolution Tranquille</I> shook Quebec in the early 1960's.

These examples are identical in meaning, but the second example uses the I element to suggest italic text.

DIV is a block-level equivalent of SPAN for containing block-level elements such as P and TABLE.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SPAN in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


STRIKE - Strike-through Text

Syntax

<STRIKE>...</STRIKE>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The STRIKE element, deprecated in HTML 4.0, suggests that text be rendered with a strike-through style. In many cases, use of a phrase element such as DEL is more appropriate since such elements express the meaning of the text more clearly. However, since support for DEL among browsers is weak, STRIKE is useful in combination with DEL, as in the following example:

The latest version of HTML recommended by the W3C is HTML <DEL DATETIME="1997-12-19T00:00:00-05:00"><STRIKE>3.2</STRIKE></DEL> <INS DATETIME="1997-12-19T00:00:00-05:00">4.0</INS>.

If DEL is not a suitable structure, style sheets should be used to complement or replace instances of STRIKE. CSS1 provides the text-decoration property for strike-through text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • STRIKE in W3C HTML 4.0 Recommendation
  • STRIKE in W3C HTML 3.2 Recommendation
  • STRIKE in WDG HTML 3.2 Reference
  • STRIKE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


STRONG - Strong Emphasis

Syntax

<STRONG>...</STRONG>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The STRONG element gives strong emphasis to its contents. Visual browsers typically render STRONG as bold text, but authors can suggest a rendering using style sheets. Since STRONG is a structural element, it carries meaning, making it preferable to font style elements such as B when strong emphasis is the intended meaning.

For weaker emphasis, use the EM element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • STRONG in W3C HTML 4.0 Recommendation
  • STRONG in W3C HTML 3.2 Recommendation
  • STRONG in HTML 2.0 Standard
  • STRONG in WDG HTML 3.2 Reference
  • STRONG in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


STYLE - Embedded Style Sheet

Syntax

<STYLE>...</STYLE>

Attribute Specifications

TYPE=ContentType (content-type of style language)
MEDIA=MediaDesc (media to apply style to)
TITLE=Text (title of style sheet)

Contents

An embedded style sheet

Contained in

HEAD

Description

The STYLE element embeds a style sheet in the document. Any number of STYLE elements may be contained in the HEAD of a document.

TYPE

The required TYPE attribute of STYLE is used to specify the Internet media type of the style language. For Cascading Style Sheets, the TYPE attribute value should be text/css.

TITLE

The optional TITLE attribute gives a title for the style sheet. Without a TITLE attribute, the style sheet is always applied when style sheets are enabled. With a TITLE attribute, the style sheet is automatically applied but the user may choose to disable the style sheet while keeping or enabling other style sheets. Style sheets with the same title are considered to be the same style sheet.

Most current browsers ignore the TITLE attribute on style sheets and do not allow the user to selectively enable or disable individual style sheets.

MEDIA

The MEDIA attribute specifies the media on which the style sheet should be applied. This allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers. The attribute's value is a comma-separated list of media descriptors. The following media descriptors are defined in HTML 4.0 and are case-sensitive:

  • screen (the default), for non-paged computer screens;
  • tty, for fixed-pitch character grid displays (such as the display used by Lynx);
  • tv, for television-type devices with low resolution and limited scrollability;
  • projection, for projectors;
  • handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
  • print, for output to a printer;
  • braille, for braille tactile feedback devices;
  • aural, for speech synthesizers;
  • all, for all devices.

Netscape Navigator 4.x incorrectly ignores any STYLE element with a MEDIA value other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. Most other browsers ignore the MEDIA attribute.

An example of an embedded style sheet follows:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>

Pre-HTML 3.2 browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, style languages like CSS allow the style sheet to be contained within an SGML comment (<!-- comment -->), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

More Information

  • STYLE in W3C HTML 4.0 Recommendation
  • STYLE in W3C HTML 3.2 Recommendation
  • STYLE in WDG HTML 3.2 Reference
  • STYLE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


SUB - Subscript

Syntax

<SUB>...</SUB>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SUB element is used for subscripts. Since SUB is inherently presentational, it should not be relied upon to express a given meaning. However, it can be useful for chemical formulas and mathematical indices, where the subscript presentation is helpful but not required. For example:

  • Chemical formulas include H<SUB>2</SUB>O (water) and C<SUB>21</SUB>H<SUB>27</sub>NO (methadone).
  • Let <VAR>x</VAR> = <VAR>x<SUB>1</SUB></VAR> + <VAR>x<SUB>2</SUB></VAR> + ... + <VAR>x<SUB>n</SUB></VAR>.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SUB in W3C HTML 4.0 Recommendation
  • SUB in W3C HTML 3.2 Recommendation
  • SUB in WDG HTML 3.2 Reference
  • SUB in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


SUP - Superscript

Syntax

<SUP>...</SUP>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SUP element is used for superscripts. Since SUP is inherently presentational, it should not be relied upon to express a given meaning. However, it can be useful for mathematical exponents where the context implies the meaning of the exponent, as well as other cases where superscript presentation is helpful but not required. For example:

  • The rent is due on the 1<SUP>st</SUP> of each month.
  • An example of a quadratic polynomial is <STRONG>3<VAR>x</VAR><SUP CLASS=exponent>2</SUP> + 5<VAR>x</VAR> - 7</STRONG>.

The following two examples are ambiguous when presented on a browser incapable of superscript text:

  • 2<SUP CLASS=exponent>4</SUP> = 16
  • sin<SUP CLASS=exponent>2</SUP><VAR>x</VAR> + cos<SUP CLASS=exponent>2</SUP><VAR>x</VAR> = 1

There is no simple solution for this problem. One could use notation such as 2^4 to represent "two raised to the exponent four." If it gains browser support, MathML should provide a more suitable solution in the future.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SUP in W3C HTML 4.0 Recommendation
  • SUP in W3C HTML 3.2 Recommendation
  • SUP in WDG HTML 3.2 Reference
  • SUP in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TABLE - Table

Syntax

<TABLE>...</TABLE>

Attribute Specifications

SUMMARY=Text (purpose/structure of table)
WIDTH=Length (table width)
BORDER=Pixels (border width)
FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (outer border)
RULES=[ none | groups | rows | cols | all ] (inner borders)
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
ALIGN=[ left | center | right ] (table alignment)
BGCOLOR=Color (table background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

An optional CAPTION, followed by zero or more COL and COLGROUP elements, followed by an optional THEAD element, an optional TFOOT element, and then one or more TBODY elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The TABLE element defines a table for multi-dimensional data arranged in rows and columns. TABLE is commonly used as a layout device, but authors should avoid this practice as much as possible. Tables can cause problems for users of narrow windows, large fonts, or non-visual browsers, and these problems are often accentuated when tables are used solely for layout purposes. As well, current visual browsers will not display anything until the complete table has been downloaded, which can have very noticeable effects when an entire document is laid out within a TABLE. Authors should try to use style sheets in place of TABLE for layout, though bugs in current browser implementations of style sheets can make this difficult.

The TABLE may contain a number of optional elements to provide a rich structure to the table. The optional CAPTION element gives a caption for the table and is followed by optional COL and COLGROUP elements that specify column widths and groupings. The THEAD, TFOOT, and TBODY elements then follow with groups of rows. The optional THEAD and TFOOT elements contain header and footer rows, respectively, while TBODY elements supply the table's main row groups. A row group contains TR elements for individual rows, and each TR contains TH or TD elements for header cells or data cells, respectively.

At least one TBODY element is required within a TABLE, but TBODY's start and end tags are both optional if there is only one TBODY and no THEAD or TFOOT. A simple table could thus be expressed as follows:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
  <TR>
    <TD>IMHO</TD>
    <TD>In My Humble Opinion</TD>
  </TR>
  <TR>
    <TD>OTOH</TD>
    <TD>On The Other Hand</TD>
  </TR>
</TABLE>

The same table could be expressed with a richer structure by grouping rows and adding a caption, as in the next example. The extra structural information allows an author to more easily suggest the presentation of the table using style sheets or TABLE's presentational attributes.

<TABLE>
  <CAPTION>Common Usenet Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Abbreviation</TH>
      <TH>Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>

SUMMARY

The TABLE element takes an optional SUMMARY attribute to describe the purpose and/or structure of the table. The overview provided by the SUMMARY attribute is particularly helpful to users of non-visual browsers. With simple tables, a good CAPTION is usually a sufficient summary, but complex tables may benefit from a more detailed overview via the SUMMARY attribute. The following example uses SUMMARY to describe a table. Note that the summary could also be included in a paragraph before the table, which is helpful since few browsers support SUMMARY.

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for symbols and Greek letters.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col>Character</TH>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>Latin small f with hook</TD>
      <TD>&amp;fnof;</TD>
      <TD>&amp;#402;</TD>
      <TD>&amp;#x192;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

The TABLE element also takes a number of optional attributes to provide presentational hints in visual browsers. Equivalents of these attributes in Cascading Style Sheets are under development and not widely supported by browsers.

WIDTH

The WIDTH attribute specifies the width of the table as a number of pixels or as a percentage of the available horizontal space. Widths in pixels should be avoided, especially widths above 500 pixels, since this causes unnecessary horizontal scrolling for some users.

BORDER

The BORDER attribute specifies the width in pixels of the border around a table.

FRAME

The FRAME attribute, poorly supported by browsers, specifies which sides of the table's outer border are visible. Possible values are void for no border, above for a top border only, below for a bottom border only, hsides for left and right borders only, vsides for top and bottom borders only, lhs for a left border only, rhs for a right border only, and either box or border for a border on all sides. The default value is void unless the BORDER attribute gives a positive width, in which case FRAME=border is the default. <TABLE BORDER> is a valid, well-supported shorthand for <TABLE FRAME=border>.

RULES

The RULES attribute, poorly supported by browsers, specifies the borders between table cells. Possible values are none for no inner borders, groups for borders between row groups and column groups only, rows for borders between rows only, cols for borders between columns only, and all for borders between all cells. None is the default value if BORDER=0 is used or if no BORDER attribute is given. All is the default value for any other use of BORDER.

CELLSPACING & CELLPADDING

The CELLSPACING attribute defines the amount of space between table cells, and the CELLPADDING attribute defines the amount of space within table cells (i.e., between the border and cell contents). The value may be given as a number of pixels or as a percentage, though most browsers do not support percentages, treating CELLPADDING="20%" as if it were CELLPADDING="20". A percentage value is relative to the vertical space available for vertical padding or spacing, and the amount is split evenly between the top and bottom. Horizontal padding and spacing behave similarly. The padding or spacing is always applied to all four sides.

The padding properties of Cascading Style Sheets allow an author to suggest different padding for different sides, but are not as well supported as the CELLPADDING attribute.

ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment of the table on visual browsers. Possible values are left, right, and center. Browsers generally present left- or right-aligned tables as floating tables, with the content following the TABLE flowing around it. To prevent content from flowing around the table, use <BR CLEAR=all> after the end of the TABLE.

Since many browsers do not support ALIGN=center with TABLE, authors may wish to place the TABLE within a CENTER element.

Style sheets provide more flexibility in suggesting table alignment but with less browser support than the ALIGN attribute.

BGCOLOR

The deprecated BGCOLOR attribute suggests a background color for the table. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TABLE in W3C HTML 4.0 Recommendation
  • TABLE in W3C HTML 3.2 Recommendation
  • TABLE in WDG HTML 3.2 Reference
  • TABLE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TBODY - Table Body

Syntax

<TBODY>...</TBODY>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TR elements

Contained in

TABLE

Description

The TBODY element defines a group of data rows in a table. A TABLE must have one or more TBODY elements, which must follow the optional TFOOT. The TBODY end tag is always optional. The start tag is optional when the table contains only one TBODY and no THEAD or TFOOT. This allows the simple table structure of HTML 3.2 to still be valid:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
</TABLE>

By explicitly grouping rows with THEAD, TFOOT, and TBODY, authors give browsers the ability to present a long table with a scrolling body and static header and footer rows. Using TBODY also provides the ability to easily suggest different presentations for different row groups through style sheets. While few browsers currently support TBODY, it can be used with no harm on non-supporting browsers.

The following example gives a table of SI units of measure. TBODY elements are used to group rows based on whether the unit is classed as a "base" unit, "derived" unit, or "supplementary" unit.

<TABLE SUMMARY="This table lists SI (International System) units of
                measure, giving the name of the unit, its symbol, and
                the quantity that it measures.">
  <CAPTION>SI Units</CAPTION>
  <THEAD>
    <TR>
      <TH SCOPE=col>Name</TH>
      <TH SCOPE=col>Symbol</TH>
      <TH SCOPE=col>Quantity</TH>
    </TR>
  </THEAD>
  <TBODY CLASS=base>
    <TR>
      <TD SCOPE=row>meter</TD>
      <TD>m</TD>
      <TD>length</TD>
    </TR>
    <TR>
      <TD SCOPE=row>kilogram</TD>
      <TD>kg</TD>
      <TD>mass</TD>
    </TR>
    ...
  </TBODY>
  <TBODY CLASS=derived>
    <TR>
      <TD SCOPE=row>hertz</TD>
      <TD>Hz</TD>
      <TD>frequency</TD>
    </TR>
    <TR>
      <TD SCOPE=row>pascal</TD>
      <TD>Pa</TD>
      <TD>pressure</TD>
    </TR>
    ...
  </TBODY>
  <TBODY CLASS=supplementary>
    <TR>
      <TD SCOPE=row>radian</TD>
      <TD>rad</TD>
      <TD>plane angle</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In addition to the attributes common to most elements, TBODY takes presentational attributes for specifying the alignment of cell data. Since few browsers support TBODY, authors may wish to specify these attributes on the TR or TD elements instead.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TBODY in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TD - Table Data Cell

Syntax

<TD>...</TD>

Attribute Specifications

ROWSPAN=Number (rows spanned by the cell)
COLSPAN=Number (columns spanned by the cell)
HEADERS=IDREFS (list of header cells for current cell)
ABBR=Text (abbreviation for header cell)
SCOPE=[ row | col | rowgroup | colgroup ] (cells covered by header cell)
AXIS=CDATA (category of header cell)
ALIGN=[ left | center | right | justify | char ] (horizontal alignment)
CHAR=Character (alignment character)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment)
WIDTH=Pixels (cell width)
HEIGHT=Pixels (cell height)
NOWRAP (suppress word wrap)
BGCOLOR=Color (cell background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

TR

Description

The TD element defines a data cell in a table. TD elements are contained within a TR element (a table row), which may also contain TH elements for header cells. When a cell's contents act as both header information and table data, TD should be used.

ROWSPAN & COLSPAN

The ROWSPAN and COLSPAN attributes of TD specify the number of rows and the number of columns, respectively, that are spanned by the cell. The default value is 1. The special value 0 indicates that the cell spans all rows or columns to the end of the table. The value 0 is ignored by most browsers, so authors may wish to calculate the exact number of rows or columns spanned and use that value.

HEADERS

The HEADERS attribute specifies the header cells that apply to the TD. The value is a space-separated list of the header cells' ID attribute values. The HEADERS attribute allows non-visual browsers to render the header information for a given cell.

ABBR, SCOPE & AXIS

The ABBR, SCOPE, and AXIS attributes should only be used if the cell provides header information. Like HEADERS, these attributes are new in HTML 4.0 and not well supported, though they should be particularly helpful to non-visual browsers in the future.

ABBR gives an abbreviated version of the cell's content. This allows visual browsers to use the short form if space is limited, and non-visual browsers can give a cell's header information in an abbreviated form before rendering each cell.

The SCOPE attribute specifies the cells for which the TD element provides header information. SCOPE is a simpler alternative to using HEADERS if the arrangement of header cells is not complex. Possible values are as follows:

  • row, when the TD provides header information for the rest of the row;
  • col, when the TD provides header information for the rest of the column;
  • rowgroup, when the TD gives header information for the rest of the row group (i.e., the remaining cells of the THEAD, TFOOT, or TBODY);
  • colgroup, when the TD gives header information for the rest of the column group (i.e., the remaining cells of the COLGROUP).

The AXIS attribute provides a method of categorizing cells. The attribute's value is a comma-separated list of category names. See the HTML 4.0 Recommendation's section on categorizing cells for an application of AXIS.

In addition to the attributes common to most elements, TD takes a number of presentational attributes. Style sheets provide a more flexible way to suggest a presentation for table cells, but TD's presentational attributes are more widely supported by current browsers.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for the cell. Possible values are left, center, right, justify, and char. ALIGN=char, poorly supported among browsers, aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

WIDTH, HEIGHT, NOWRAP & BGCOLOR

The WIDTH, HEIGHT, NOWRAP, and BGCOLOR attributes are all deprecated in favor of style sheets. WIDTH and HEIGHT suggest the cell's width and height in pixels. The boolean NOWRAP attribute tells visual browsers to disable word wrap for the cell, which can result in unnecessary horizontal scrolling depending on the user's window width and font size.

The BGCOLOR attribute suggests a background color for the cell. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TD in W3C HTML 4.0 Recommendation
  • TD in W3C HTML 3.2 Recommendation
  • TD in WDG HTML 3.2 Reference
  • TD in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TEXTAREA - Multi-line Text Input

Syntax

<TEXTAREA>...</TEXTAREA>

Attribute Specifications

NAME=CDATA (key in submitted form)
ROWS=Number (number of rows)
COLS=Number (number of columns)
DISABLED (disable element)
READONLY (prevent changes)
ACCESSKEY=Character (shortcut key)
TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)
ONSELECT=Script (element text selected)
ONCHANGE=Script (element value changed)

Contents

Plain text (including entities)

Contained in

Block-level elements, inline elements except BUTTON

Description

The TEXTAREA element defines a form control for the user to enter multi-line text input. While TEXTAREA is most useful within a FORM, HTML 4.0 allows TEXTAREA in any block-level or inline element other than BUTTON. However, Netscape Navigator will not display any TEXTAREA elements outside of a FORM.

The initial value of the TEXTAREA is provided as the content of the element and must not contain any HTML tags. When a form is submitted, the current value of any TEXTAREA element within the FORM is sent to the server as a name/value pair. The TEXTAREA element's NAME attribute provides the name used.

ROWS & COLS

The required ROWS and COLS attributes specify the number of visible rows and columns, respectively, in a visual browser. These attributes provide a guide for the user rather than a restriction; browsers allow an unlimited amount of text input in theory, though in practice many browsers limit the contents of a TEXTAREA to 32 or 64 kilobytes. Author restrictions on the amount of data entered should be enforced by the CGI script or Java servlet handling the form.

READONLY & DISABLED

The boolean READONLY attribute, new in HTML 4.0 and poorly supported by current browsers, prevents the user from editing the content of the TEXTAREA. Read-only elements are still submitted with the form. The DISABLED attribute, also poorly supported, disables the TEXTAREA. Disabled elements are read-only elements with the added restrictions that the values are not submitted with the form, the elements cannot receive focus, and the elements are skipped when navigating the document by tabbing.

ACCESSKEY

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for giving focus to the TEXTAREA. Authors can set the access key on the TEXTAREA element or the LABEL element associated with it. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. A TEXTAREA with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

ONFOCUS, ONBLUR, ONSELECT & ONCHANGE

The TEXTAREA element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, TEXTAREA accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus;
  • ONSELECT, when text in the element is selected;
  • ONCHANGE, when the element loses focus and its value has changed since it received focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TEXTAREA in W3C HTML 4.0 Recommendation
  • TEXTAREA in W3C HTML 3.2 Recommendation
  • TEXTAREA in HTML 2.0 Standard
  • TEXTAREA in WDG HTML 3.2 Reference
  • TEXTAREA in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TFOOT - Table Foot

Syntax

<TFOOT>...</TFOOT>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TR elements

Contained in

TABLE

Description

The TFOOT element defines a group of footer rows in a table. A TABLE may have one TFOOT, which must follow the optional THEAD and precede the required TBODY.

By explicitly grouping footer rows with TFOOT, authors give browsers the ability to include the footer rows on each page of a printed, multi-page table, as well as the ability to present a long table with a scrolling body and static footer rows. However, few browsers currently support TFOOT, and the requirement that it be placed before the TBODY may make it unsuitable for non-supporting browsers. If the presentation of footer rows prior to body rows is not acceptable, authors should avoid using TFOOT until browser support is greater.

A table footer may provide a summary row or footnotes that apply to the entire table or portions of it. The following example uses TFOOT to contain footnotes for a table:

<TABLE SUMMARY="This table lists program available at the university
                based on the discipline and type of degree.">
  <CAPTION>Programs Available</CAPTION>
  <COLGROUP CLASS="program-discipline">
  <COLGROUP CLASS="program-type" SPAN=5>
  <THEAD>
    <TR>
      <TH SCOPE=col>Program</TH>
      <TH SCOPE=col>Honors Co-op</TH>
      <TH SCOPE=col>Honors Regular</TH>
      <TH SCOPE=col>General Regular</TH>
      <TH SCOPE=col>*Preprofessional or Professional</TH>
    </TR>
  </THEAD>
  <TFOOT CLASS=footnote>
    <TR>
      <TD COLSPAN=5>
          Many disciplines are also available as Minors and Joint
          Honors programs.
      </TD>
    </TR>
    <TR>
      <TD COLSPAN=5>
        * Preprofessional programs normally fulfull the academic
          requirements for registration in the related professions.
      </TD>
    </TR>
  </TFOOT>
  <TBODY>
    <TR>
      <TD SCOPE=row>Computer Science</TD>
      <TD>yes</TD>
      <TD>yes</TD>
      <TD>no</TD>
      <TD>no</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In addition to the attributes common to most elements, TFOOT takes presentational attributes for specifying the alignment of cell data. Since few browsers support TFOOT, authors may wish to specify these attributes on the TR or TD elements instead.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TFOOT in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TH - Table Header Cell

Syntax

<TH>...</TH>

Attribute Specifications

ROWSPAN=Number (rows spanned by the cell)
COLSPAN=Number (columns spanned by the cell)
HEADERS=IDREFS (list of header cells for current cell)
ABBR=Text (abbreviation for header cell)
SCOPE=[ row | col | rowgroup | colgroup ] (cells covered by header cell)
AXIS=CDATA (category of header cell)
ALIGN=[ left | center | right | justify | char ] (horizontal alignment)
CHAR=Character (alignment character)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment)
WIDTH=Pixels (cell width)
HEIGHT=Pixels (cell height)
NOWRAP (suppress word wrap)
BGCOLOR=Color (cell background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

TR

Description

The TH element defines a header cell in a table. TH elements are contained within a TR element (a table row), which may also contain TD elements for data cells. When a cell's contents act as both header information and table data, TD should be used.

ROWSPAN & COLSPAN

The ROWSPAN and COLSPAN attributes of TH specify the number of rows and the number of columns, respectively, that are spanned by the cell. The default value is 1. The special value 0 indicates that the cell spans all rows or columns to the end of the table. The value 0 is ignored by most browsers, so authors may wish to calculate the exact number of rows or columns spanned and use that value.

HEADERS

The HEADERS attribute specifies the header cells that apply to the TH. The value is a space-separated list of the header cells' ID attribute values. The HEADERS attribute allows non-visual browsers to render the header information for a given cell.

ABBR

The ABBR attribute gives an abbreviated version of the cell's content. This allows visual browsers to use the short form if space is limited, and non-visual browsers can give a cell's header information in an abbreviated form before rendering each cell.

SCOPE

The SCOPE attribute specifies the cells for which the TH element provides header information. SCOPE is a simpler alternative to using HEADERS if the arrangement of header cells is not complex. Possible values are as follows:

  • row, when the TH provides header information for the rest of the row;
  • col, when the TH provides header information for the rest of the column;
  • rowgroup, when the TH gives header information for the rest of the row group (i.e., the remaining cells of the THEAD, TFOOT, or TBODY);
  • colgroup, when the TH gives header information for the rest of the column group (i.e., the remaining cells of the COLGROUP).

AXIS

The AXIS attribute provides a method of categorizing cells. The attribute's value is a comma-separated list of category names. See the HTML 4.0 Recommendation's section on categorizing cells for an application of AXIS.

In addition to the attributes common to most elements, TH takes a number of presentational attributes. Style sheets provide a more flexible way to suggest a presentation for table cells, but TH's presentational attributes are more widely supported by current browsers.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for the cell. Possible values are left, center, right, justify, and char. ALIGN=char, poorly supported among browsers, aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

WIDTH, HEIGHT, NOWRAP & BGCOLOR

The WIDTH, HEIGHT, NOWRAP, and BGCOLOR attributes are all deprecated in favor of style sheets. WIDTH and HEIGHT suggest the cell's width and height in pixels. The boolean NOWRAP attribute tells visual browsers to disable word wrap for the cell, which can result in unnecessary horizontal scrolling depending on the user's window width and font size.

The BGCOLOR attribute suggests a background color for the cell. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TH in W3C HTML 4.0 Recommendation
  • TH in W3C HTML 3.2 Recommendation
  • TH in WDG HTML 3.2 Reference
  • TH in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


THEAD - Table Head

Syntax

<THEAD>...</THEAD>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TR elements

Contained in

TABLE

Description

The THEAD element defines a group of header rows in a table. A TABLE may have one THEAD, which must follow any CAPTION, COL, or COLGROUP elements, and precede the optional TFOOT and required TBODY elements.

By explicitly grouping header rows with THEAD, authors give browsers the ability to include the header rows on each page of a printed, multi-page table, as well as the ability to present a long table with a scrolling body and static header rows. While few browsers currently support THEAD, it can be used with no harm on non-supporting browsers.

The following example uses THEAD to group the two header rows of a table:

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for 8-bit Latin-1 characters, as well as the
                rendering of each in your browser.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col ROWSPAN=2>Character</TH>
      <TH SCOPE=col ROWSPAN=2>Entity</TH>
      <TH SCOPE=col ROWSPAN=2>Decimal</TH>
      <TH SCOPE=col ROWSPAN=2>Hex</TH>
      <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>
    </TR>
    <TR>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>non-breaking space</TD>
      <TD>&amp;nbsp;</TD>
      <TD>&amp;#160;</TD>
      <TD>&amp;#xA0;</TD>
      <TD>&nbsp;</TD>
      <TD>&#160;</TD>
      <TD>&#xA0;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In addition to the attributes common to most elements, THEAD takes presentational attributes for specifying the alignment of cell data. Since few browsers support THEAD, authors may wish to specify these attributes on the TR, TH, or TD elements instead.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • THEAD in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TITLE - Document Title

Syntax

<TITLE>...</TITLE>

Attribute Specifications

internationalization attributes

Contents

Plain text (including entities)

Contained in

HEAD

Description

The TITLE element gives the document's title. Each document must have exactly one TITLE within the HEAD. TITLE contains plain text and entities; it may not contain other markup.

A good TITLE should be short and specific to the document's content so that it can be used as a title for a user's bookmark, a title for the display window on visual browsers, and a link from a search engine. A suggested limit for the number of characters in a TITLE is 60.

More Information

  • TITLE in W3C HTML 4.0 Recommendation
  • TITLE in W3C HTML 3.2 Recommendation
  • TITLE in HTML 2.0 Standard
  • TITLE in WDG HTML 3.2 Reference
  • TITLE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TR - Table Row

Syntax

<TR>...</TR>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
BGCOLOR=Color (row background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TH or TD elements

Contained in

THEAD, TFOOT, TBODY

Description

The TR element defines a table row. TR elements must be contained within a row group defined by THEAD, TFOOT, or TBODY. Since the start and end tags of TBODY are optional when the table has one TBODY and no THEAD or TFOOT, the simple table structure of HTML 3.2 is still valid:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
</TABLE>

TR contains TH or TD elements, which in turn contain the actual data of the table. In addition to the attributes common to most elements, TR takes presentational attributes for specifying the alignment of cells within the row and the row's background color.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

BGCOLOR

The deprecated BGCOLOR attribute suggests a background color for the row. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a row's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TR in W3C HTML 4.0 Recommendation
  • TR in W3C HTML 3.2 Recommendation
  • TR in WDG HTML 3.2 Reference
  • TR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


TT - Teletype Text

Syntax

<TT>...</TT>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The TT element suggests that text be rendered as teletype or monospaced text. In most cases, use of a phrase element such as CODE, SAMP, or KBD is more appropriate since these elements express the meaning of the text more clearly.

Style sheets should be used to complement or replace instances of TT. For example, replacing

<H1><TT>My heading</TT></H1>

with

<H1>My heading</H1>

and

H1 { font-family: monospace }

in a style sheet allows the author to change the presentation of all H1 elements in an entire site by changing just one line in the style sheet.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TT in W3C HTML 4.0 Recommendation
  • TT in W3C HTML 3.2 Recommendation
  • TT in HTML 2.0 Standard
  • TT in WDG HTML 3.2 Reference
  • TT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


U - Underlined Text

Syntax

<U>...</U>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The U element, deprecated in HTML 4.0, suggests that text be rendered as underlined text. In most cases, use of a phrase element such as CITE or STRONG is more appropriate since such elements express the meaning of the text more clearly.

Style sheets should be used to complement or replace instances of U. For example, replacing

<H1><U>My heading</U></H1>

with

<H1>My heading</H1>

and

H1 { text-decoration: underline }

in a style sheet allows the author to change the presentation of all H1 elements in an entire site by changing just one line in the style sheet.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • U in W3C HTML 4.0 Recommendation
  • U in W3C HTML 3.2 Recommendation
  • U in WDG HTML 3.2 Reference
  • U in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


UL - Unordered List

Syntax

<UL>...</UL>

Attribute Specifications

TYPE=[ disc | square | circle ] (bullet style)
COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The UL element defines an unordered list. The element contains one or more LI elements that define the actual items of the list.

Unlike with an ordered list (OL), the items of an unordered list have no sequence. In theory, users should be able to change the order of items in an unordered list (e.g., alphabetizing them).

Visual browsers typically render UL with a bullet preceding each list item, but authors can suggest various presentations using style sheets. The list-style property of Cascading Style Sheets allows authors to suppress bullets, use images as list item markers, and more.

TYPE

The deprecated TYPE attribute of UL suggests the bullet style on visual browsers. Possible values are as follows:

  • disc (a filled-in circle)
  • square (a square outline)
  • circle (a circle outline)

The bullet style on an individual list item can be suggested using the TYPE attribute of LI. The list-style-type property of CSS provides greater flexibility in suggesting bullet styles.

COMPACT

The deprecated COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • UL in W3C HTML 4.0 Recommendation
  • UL in W3C HTML 3.2 Recommendation
  • UL in HTML 2.0 Standard
  • UL in WDG HTML 3.2 Reference
  • UL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


VAR - Variable

Syntax

<VAR>...</VAR>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The VAR element is used to markup variables or program arguments. Visual browsers typically render VAR as italic text, but authors can suggest a rendering using style sheets. Since VAR is a structural element, it carries meaning, making it preferable to font style elements such as I when marking up variables.

Example:

<P>Versions of HTML are typically numbered in an <VAR>x</VAR>.<VAR>x</VAR> format.</P>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • VAR in W3C HTML 4.0 Recommendation
  • VAR in W3C HTML 3.2 Recommendation
  • VAR in HTML 2.0 Standard
  • VAR in WDG HTML 3.2 Reference
  • VAR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Nhi Hoang


Guide to Cascading Style Sheets

The Web Design Group

Cascading Style Sheets

Style Sheets Now!
Change the appearance of hundreds of Web pages by changing just one file... Influence presentation without losing visitors... All with the power and flexibility of Web style sheets.
Quick Tutorial
A basic introduction to Cascading Style Sheets.
CSS Structure and Rules
An introduction to the various kinds of selectors, pseudo-classes, pseudo-elements, and cascading order.
CSS Properties
Descriptions of the various properties available in Cascading Style Sheets, level 1.
Linking Style Sheets to HTML
Various methods of incorporating style sheets into an HTML document.
Style Sheet Dependence
How to misuse style sheets and make your pages inaccessible.
CSSCheck
Check the syntax and style of your Cascading Style Sheets with this CSS lint.
CSS References
Links to CSS specifications and other documentation.

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Style Sheets Now!

Web style sheets have been around for a number of years, but their power and importance went largely unnoticed since few implementations existed. Web authors, anxious to add creativity to their pages by influencing the presentation, began to use Netscape's proprietary extensions rather than the more powerful style sheets. This was quite natural, since Netscape's proprietary extensions could be seen by a significant portion of Web users, while few would see style sheet enhancements.

Today, more and more browsers are implementing style sheets, opening authors' eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets became apparent, as did the disadvantages of continually creating more HTML tags for presentation effects.

Netscape's BODY attributes are now widely accepted on the Web, and have become standardized in HTML 3.2. Yet BGCOLOR, TEXT and friends simply do not provide the flexibility of style sheets. Most background images would leave a page unreadable to someone whose display only offered 16 colors; many pages are difficult to read with only 256 colors. With conventional BODY attributes, an author must choose whether the benefits of a background image outweigh the costs; with style sheets, an author can offer a number of different images, in different style sheets, so that the user can choose the "24-bit style sheet" or "8-bit style sheet," depending on how many colors his or her system can display. If no author-supplied style suits the user, he or she can simply ignore the author's style.

Style sheets can make an author's life much easier. While one could use <HR WIDTH="75%" SIZE=5 ALIGN=center> for every horizontal rule, this becomes very cumbersome for the author. With style sheets, one only needs to specify such presentational preferences once, and the style can be applied to an entire site. And if the author decides that WIDTH="50%" would be better, then he or she only needs to change this preference in one place, rather than having to search through hundreds of pages to change the HTML. Not only that, but style sheets also reduce download time when one file contains all the style information.

Style sheets also offer much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border, and many more can be applied to all elements. With just HTML and its proprietary extensions, one must rely on attributes like BGCOLOR, which are only available for a few elements. Style sheets give the flexibility of applying a style to all paragraphs, or all level-two headings, or all emphasized text.

With style sheets, authors can use the text-indent property to indent text, rather than resorting to ugly kludges like <DD> or <IMG SRC="blank.gif" WIDTH=10 ALT=""> that carry with them many negative side-effects. Margins can be suggested without having to put the entire page in a table. Style sheets also reduce the need for multi-file search and replace; if an author decides to change the indentation of all paragraphs on a site, he or she only has to change one line on a style sheet.

Style sheets represent an enormous step forward for the Web. With the separation of content and presentation between HTML and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users.

Current Browser Support for CSS

The number of browsers supporting Cascading Style Sheets continues to increase rapidly. Netscape Navigator 4.0 features a large amount of support for CSS1 and CSS Positioning. Microsoft Internet Explorer 3 has partial CSS1 support with a strong level of CSS1 and CSS Positioning implemented in IE4, accompanied by early support for CSS Printing.

Style sheet support on the UNIX platform has long existed with Emacs-W3 and Arena, and the W3C's Amaya browser combines CSS support with a "WYSIWYG" editor for making CSS-enhanced Web pages.

Beyond CSS1

Future extensions to CSS1 are aimed at bringing better support for printing Web pages, styles for speech and braille output, positioning, fonts, and device-independent colors.

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


CSS Quick Tutorial

A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.

Note that while the STYLE element is a good method of experimenting with style sheets, it has disadvantages that should be considered before one uses this method in practice. The advantages and disadvantages of the various methods are discussed in the section on linking style sheets to HTML.

Each rule is made up of a selector--usually an HTML element such as BODY, P, or EM--and the style to be applied to the selector.

There are numerous properties that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented.

Style rules are formed as follows:

selector { property: value }

Multiple style declarations for a single selector may be separated by a semicolon:

selector { property1: value1; property2: value2 }

As an example, the following code segment defines the color and font-size properties for H1 and H2 elements:

<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
  H1 { font-size: x-large; color: red }
  H2 { font-size: large; color: blue }
</STYLE>
</HEAD>

The above style sheet tells the browser to show level-one headings in an extra-large, red font, and to show level-two headings in a large, blue font. The CSS1 Specification formally defines all properties and values available. The properties and values are also given in the CSS Properties section of this site.

This tutorial is intended as a very basic introduction to Cascading Style Sheets and should provide enough information to allow you to experiment with a few of your own styles. For a more in-depth look at Cascading Style Sheets, read the following sections:

  • CSS Structure and Rules
  • CSS Properties
  • Linking Style Sheets to HTML

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997-98 John Pozadzides and Liam Quinn. All rights reserved.


CSS Structure and Rules

[ Basic Syntax | Pseudo-classes and Pseudo-elements | Cascading Order ]

Basic Syntax

Rules

Selectors

Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=svp94O>Text indented 3em</P>
Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

  1. ! important

    Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement:

    BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important }
  2. Origin of Rules (Author's vs. Reader's)

    As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.

    Authors should be wary of using ! important rules since they will override any of the user's ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.

  3. Selector Rules: Calculating Specificity

    Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

    1. Count the number of ID attributes in the selector.
    2. Count the number of CLASS attributes in the selector.
    3. Count the number of HTML tag names in the selector.

    Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

    #id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
  4. Order of Specification

    To make it easy, when two rules have the same weight, the last rule specified wins.

[ Basic Syntax | Pseudo-classes and Pseudo-elements | Cascading Order ]

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


CSS1 Properties

  • Syntax Used in Property Definitions
  • Font Properties
  • Color and Background Properties
  • Text Properties
  • Box Properties
  • Classification Properties
  • Units

Syntax Used in Property Definitions

<Foo>
Value of type Foo. Common types are discussed in the Units section.
Foo
A keyword that must appear literally (though without case sensitivity). Commas and slashes must also appear literally.
A B C
A must occur, then B, then C, in that order.
A | B
A or B must occur.
A || B
A or B or both must occur, in any order.
[ Foo ]
Brackets are used to group items together.
Foo*
Foo is repeated zero or more times.
Foo+
Foo is repeated one or more times.
Foo?
Foo is optional.
Foo{A,B}
Foo must occur at least A times and at most B times.

Font Properties

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Font Family

Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values: <family-name>
  • Any font family name may be used
<generic-family>
  • serif (e.g., Times)
  • sans-serif (e.g., Arial or Helvetica)
  • cursive (e.g., Zapf-Chancery)
  • fantasy (e.g., Western)
  • monospace (e.g., Courier)
Initial Value: Determined by browser
Applies to: All elements
Inherited: Yes

Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.

A sample font-family declaration might look like this:

P { font-family: "New Century Schoolbook", Times, serif }

Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. However, since both of them are serif fonts, the generic font family is listed as a backup in case the system does not have either of these but has another serif font which meets the qualifications.

Any font name containing whitespace must be quoted, with either single or double quotes.

The font family may also be given with the font property.

Font Style

Syntax: | font-style: <value>
Possible Values: | normal | italic | oblique
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this:

H1 { font-style: oblique }
P  { font-style: normal }

Font Variant

Syntax: | font-variant: <value>
Possible Values: | normal | small-caps
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be:

SPAN { font-variant: small-caps }

Font Weight

Syntax: | font-weight: <value>
Possible Values: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate will be chosen on the following basis:

  • 500 may be switched with 400, and vice versa
  • 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise
  • 600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise

Some example font-weight assignments would be:

H1 { font-weight: 800 }
P  { font-weight: normal }

Font Size

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)

Initial Value: medium
Applies to: All elements
Inherited: Yes

The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

Some example size assignments would be:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IE would probably be considered xx-large.

Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.

Font

Syntax: | font: <value>
Possible Values: | [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | Yes

The font property may be used as a shorthand for the various font properties, as well as the line height. For example,

P { font: italic bold 12pt/14pt Times, serif }

specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

Color and Background Properties

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Color

Syntax: | color: <color>
Initial Value: | Determined by browser
Applies to: | All elements
Inherited: | Yes

The color property allows authors to specify the color of an element. See the Units section for color value descriptions. Some example color rules include:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Background Color

Syntax: | background-color: <value>
Possible Values: | <color> | transparent
Initial Value: | transparent
Applies to: | All elements
Inherited: | No

The background-color property sets the background color of an element. For example:

BODY { background-color: white }
H1   { background-color: #000080 }

To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.

Authors may also use the shorthand background property, which is currently better supported than the background-color property.

Background Image

Syntax: | background-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The background-image property sets the background image of an element. For example:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

When a background image is defined, a similar background color should also be defined for those not loading images.

Authors may also use the shorthand background property, which is currently better supported than the background-image property.

Background Repeat

Syntax: | background-repeat: <value>
Possible Values: | repeat | repeat-x | repeat-y | no-repeat
Initial Value: | repeat
Applies to: | All elements
Inherited: | No

The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally.

Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.

Background Attachment

Syntax: | background-attachment: <value>
Possible Values: | scroll | fixed
Initial Value: | scroll
Applies to: | All elements
Inherited: | No

The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Authors may also use the shorthand background property, which is currently better supported than the background-attachment property.

Background Position

Syntax: | background-position: <value>
Possible Values: | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial Value: | 0% 0%
Applies to: | Block-level and replaced elements
Inherited: | No

The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)

The easiest way to assign a background position is with keywords:

  • Horizontal keywords (left, center, right)
  • Vertical keywords (top, center, bottom)

Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.

If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

The keywords are interpreted as follows:

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.

Authors may also use the shorthand background property, which is currently better supported than the background-position property.

Background

Syntax: | background: <value>
Possible Values: | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%.

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Text Properties

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Word Spacing

Syntax: | word-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The word-spacing property defines an additional amount of space between words. The value must be in the length format; negative values are permitted.

Examples:

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

Letter Spacing

Syntax: | letter-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The letter-spacing property defines an additional amount of space between characters. The value must be in the length format; negative values are permitted. A setting of 0 will prevent justification.

Examples:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

Text Decoration

Syntax: | text-decoration: <value>
Possible Values: | none | [ underline || overline || line-through || blink ]
Initial Value: | none
Applies to: | All elements
Inherited: | No

The text-decoration property allows text to be decorated through one of five properties: underline, overline, line-through, blink, or the default, none.

For example, one can suggest that links not be underlined with

A:link, A:visited, A:active { text-decoration: none }

Vertical Alignment

Syntax: | vertical-align: <value>
Possible Values: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial Value: | baseline
Applies to: | Inline elements
Inherited: | No

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

  • baseline (align baselines of element and parent)
  • middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
  • sub (subscript)
  • super (superscript)
  • text-top (align tops of element and parent's font)
  • text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

  • top (align top of element with tallest element on the line)
  • bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

Text Transformation

Syntax: | text-transform: <value>
Possible Values: | none | capitalize | uppercase | lowercase
Initial Value: | none
Applies to: | All elements
Inherited: | Yes

The text-transform property allows text to be transformed by one of four properties:

  • capitalize (capitalizes first character of each word)
  • uppercase (capitalizes all characters of each word)
  • lowercase (uses small letters for all characters of each word)
  • none (the initial value)

Examples:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

The text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.

Text Alignment

Syntax: | text-align: <value>
Possible Values: | left | right | center | justify
Initial Value: | Determined by browser
Applies to: | Block-level elements
Inherited: | Yes

The text-align property can be applied to block-level elements (P, H1, etc.) to give the alignment of the element's text. This property is similar in function to HTML's ALIGN attribute on paragraphs, headings, and divisions.

Some examples follow:

H1          { text-align: center }
P.newspaper { text-align: justify }

Text Indentation

Syntax: | text-indent: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | Block-level elements
Inherited: | Yes

The text-indent property can be applied to block-level elements (P, H1, etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph:

P { text-indent: 5em }

Line Height

Syntax: | line-height: <value>
Possible Values: | normal | <number> | <length> | <percentage>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The line-height property will accept a value to control the spacing between baselines of text. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Line height may also be given in the font property along with a font size.

The line-height property could be used to double space text:

P { line-height: 200% }

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.

Box Properties

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear

Top Margin

Syntax: | margin-top: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-top property sets the top margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

For example, the following rule would eliminate the top margin of a document:

BODY { margin-top: 0 }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Right Margin

Syntax: | margin-right: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-right property sets the right margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

P.narrow { margin-right: 50% }

Note that adjoining horizontal margins are not collapsed.

Bottom Margin

Syntax: | margin-bottom: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-bottom property sets the bottom margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Left Margin

Syntax: | margin-left: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-left property sets the left margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

ADDRESS { margin-left: 50% }

Note that adjoining horizontal margins are not collapsed.

Margin

Syntax: | margin: <value>
Possible Values: | [ <length> | <percentage> | auto ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The margin property sets the margins of an element by specifying between one and four values, where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Examples of margin declarations include:

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Horizontal margins are not collapsed.

Using the margin property allows one to set all margins; alternatively, the properties margin-top, margin-bottom, margin-left, and margin-right may be used.

Top Padding

Syntax: | padding-top: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-top property describes how much space to put between the top border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Right Padding

Syntax: | padding-right: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-right property describes how much space to put between the right border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Bottom Padding

Syntax: | padding-bottom: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Left Padding

Syntax: | padding-left: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Padding

Syntax: | padding: <value>
Possible Values: | [ <length> | <percentage> ]{1,4}
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.

An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width

Syntax: | border-top-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-top-width property is used to specify the width of an element's top border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-top, border-width, or border shorthand properties.

Right Border Width

Syntax: | border-right-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-right-width property is used to specify the width of an element's right border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-right, border-width, or border shorthand properties.

Bottom Border Width

Syntax: | border-bottom-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-bottom-width property is used to specify the width of an element's bottom border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-bottom, border-width, or border shorthand properties.

Left Border Width

Syntax: | border-left-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-left-width property is used to specify the width of an element's left border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-left, border-width, or border shorthand properties.

Border Width

Syntax: | border-width: <value>
Possible Values: | [ thin | medium | thick | <length> ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.

If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

One may also use the border shorthand property.

Border Color

Syntax: | border-color: <value>
Possible Values: | <color>{1,4}
Initial Value: | The value of the color property
Applies to: | All elements
Inherited: | No

The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Border Style

Syntax: | border-style: <value>
Possible Values: | [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial Value: | none
Applies to: | All elements
Inherited: | No

The border-style property sets the style of an element's border. This property must be specified for the border to be visible.

Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Top Border

Syntax: | border-top: <value>
Possible Values: | <border-top-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-top property is a shorthand for setting the width, style, and color of an element's top border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Right Border

Syntax: | border-right: <value>
Possible Values: | <border-right-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-right property is a shorthand for setting the width, style, and color of an element's right border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Bottom Border

Syntax: | border-bottom: <value>
Possible Values: | <border-bottom-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Left Border

Syntax: | border-left: <value>
Possible Values: | <border-left-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-left property is a shorthand for setting the width, style, and color of an element's left border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Border

Syntax: | border: <value>
Possible Values: | <border-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border property is a shorthand for setting the width, style, and color of an element's border.

Examples of border declarations include:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

Width

Syntax: | width: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.

This property could be used to give common widths to some INPUT elements, such as submit and reset buttons:

INPUT.button { width: 10em }

Height

Syntax: | height: <value>
Possible Values: | <length> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.

As with the width property, height can be used to scale an image:

IMG.foo { width: 40px; height: 40px }

In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file. However, scaling through the width and height properties is a useful option for user-defined style sheets in order to overcome vision problems.

Float

Syntax: | float: <value>
Possible Values: | left | right | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The float property allows authors to wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the images and tables that HTML 3.2 allows.

Clear

Syntax: | clear: <value>
Possible Values: | none | left | right | both
Initial Value: | none
Applies to: | All elements
Inherited: | No

The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. This property is similar in function to HTML 3.2's <BR CLEAR=left|right|all|none>, but it can be applied to all elements.

Classification Properties

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style

Display

Syntax: | display: <value>
Possible Values: | block | inline | list-item | none
Initial Value: | block
Applies to: | All elements
Inherited: | No

The display property is used to define an element with one of four values:

  • block (a line break before and after the element)
  • inline (no line break before and after the element)
  • list-item (same as block except a list-item marker is added)
  • none (no display)

Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification.

The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements!

Whitespace

Syntax: | white-space: <value>
Possible Values: | normal | pre | nowrap
Initial Value: | normal
Applies to: | Block-level elements
Inherited: | Yes

The white-space property will determine how spaces within the element are treated. This property takes one of three values:

  • normal (collapses multiple spaces into one)
  • pre (does not collapse multiple spaces)
  • nowrap (does not allow line wrapping without a <BR> tag)

List Style Type

Syntax: | list-style-type: <value>
Possible Values: | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial Value: | disc
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off.

Examples:

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

List Style Image

Syntax: | list-style-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property.

Examples:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

List Style Position

Syntax: | list-style-position: <value>
Possible Values: | inside | outside
Initial Value: | outside
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented. An example rendering is:

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

List Style

Syntax: | list-style: <value>
Possible Values: | <list-style-type> || <list-style-position> || <url>
Initial Value: | Not defined
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.

Examples:

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

Units

  • Length Units
  • Percentage Units
  • Color Units
  • URLs

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

  • em (ems, the height of the element's font)
  • ex (x-height, the height of the letter "x")
  • px (pixels, relative to the canvas resolution)

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

Percentage Units

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Color Units

A color value is a keyword or a numerical RGB specification.

The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB colors are given in one of four ways:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

The examples above all specify the same color.

Douglas R. Jacobson has also developed a handy quick reference RGB Color Chart (61 kB).

URLs

A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

Examples:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Syntax Used in CSS Property Definitions

<Foo>
Value of type Foo. Common types are discussed on the Units page.
Foo
A keyword that must appear literally (though without case sensitivity). Commas and slashes must also appear literally.
A B C
A must occur, then B, then C, in that order.
A | B
A or B must occur.
A || B
A or B or both must occur, in any order.
[ Foo ]
Brackets are used to group items together.
Foo*
Foo is repeated zero or more times.
Foo+
Foo is repeated one or more times.
Foo?
Foo is optional.
Foo{A,B}
Foo must occur at least A times and at most B times.

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


CSS Units

[ Length Units | Percentage Units | Color Units | URLs ]

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

  • em (ems, the height of the element's font)
  • ex (x-height, the height of the letter "x")
  • px (pixels, relative to the canvas resolution)

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

Percentage Units

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Color Units

A color value is a keyword or a numerical RGB specification.

The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB colors are given in one of four ways:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

The examples above all specify the same color.

Douglas R. Jacobson has also developed a handy quick reference RGB Color Chart (61 kB).

URLs

A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

Examples:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

[ Length Units | Percentage Units | Color Units | URLs ]

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Linking Style Sheets to HTML

There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.

  • Linking to an External Style Sheet
  • Embedding a Style Sheet
  • Importing a Style Sheet
  • Inlining Style
  • The CLASS Attribute
  • The ID Attribute
  • The SPAN Element
  • The DIV Element
  • A Note about Validation

Linking to an External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element:

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css"
 TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css"
 TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

The <LINK> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.

External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements. A file consisting solely of

P { margin: 2em }

could be used as an external style sheet.

The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

  • screen (the default value), for presentation on non-paged computer screens;
  • print, for output to a printer;
  • projection, for projected presentations;
  • aural, for speech synthesizers;
  • braille, for presentation on braille tactile feedback devices;
  • tty, for character cell displays (using a fixed-pitch font);
  • tv, for televisions;
  • all, for all output devices.

Multiple media are specified through a comma-separated list or the value all.

Netscape Navigator 4.x incorrectly ignores any linked or embedded style sheets declared with MEDIA values other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all.

The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute, as in the first <LINK> tag in the example, defines a persistent style.

A preferred style is one that is automatically applied, such as in the second <LINK> tag in the example. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet". The third <LINK> tag in the example defines an alternate style, which the user could choose to replace the preferred style sheet.

Note that current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, one must use the same TITLE with each style sheet.

An external style sheet is ideal when the style is applied to numerous pages. With an external style sheet, an author could change the look of an entire site by simply changing one file. As well, most browsers will cache an external style sheet, thus avoiding a delay in page presentation once the style sheet is cached.

Microsoft Internet Explorer 3 for Windows 95/NT4 does not support BODY background images or colors from linked style sheets. Given this bug, authors may wish to provide another mechanism for including a background image or color, such as embedding or inlining the style, or by using the BACKGROUND attribute of the BODY element.

Embedding a Style Sheet

A style sheet may be embedded in a document with the STYLE element:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>

The STYLE element is placed in the document HEAD. The required TYPE attribute is used to specify a media type, as is its function with the LINK element. Similarly, the TITLE and MEDIA attributes may also be specified with STYLE.

Older browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, the contents of the STYLE element are contained within an SGML comment (<!-- comment -->), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

Importing a Style Sheet

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.htmlhelp.com/style.css);
  @import url(/stylesheets/punk.css);
  DT { background: yellow; color: black }
-->
</STYLE>

Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT { background: aqua }, definition terms would still have a yellow background.

The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow.

Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element.

Inlining Style

Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. An example follows:

<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> This paragraph is styled in red with the New Century Schoolbook font, if available.</P>

Note that New Century Schoolbook is contained within single quotes in the STYLE attribute since double quotes are used to contain the style declarations.

Inlining style is far more inflexible than the other methods. To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Inlining style loses many of the advantages of style sheets by mixing content with presentation. As well, inlined styles implicitly apply to all media, since there is no mechanism for specifying the intended medium for an inlined style. This method should be used sparingly, such as when a style is to be applied on all media to a single occurrence of an element. If the style should be applied to a single element instance but only with certain media, use the ID attribute instead of the STYLE attribute.

The CLASS Attribute

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

These classes could be referenced in HTML with the CLASS attribute:

<H1 CLASS=punk>Proprietary Extensions</H1>
<P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...

In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.

A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.

Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page uses classes to give a different style to CSS code and HTML code.

The ID Attribute

The ID attribute is used to define a unique style for an element. A CSS rule such as

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

<P ID=wdg97>Welcome to the Web Design Group!</P>

Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.

Note that HTML 4.0 allows periods in ID attribute values, but CSS1 does not allow periods in ID selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a numeric code, but HTML 4.0 does not allow these characters in an ID attribute value.

The use of ID is appropriate when a style only needs to be applied once in any document. ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).

The SPAN Element

The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. SPAN may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes.

SPAN is an inline element, so it may be used just as elements such as EM and STRONG in HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled.

Some examples of SPAN follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
  .firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN> of a
paragraph could be in small-caps. Style may also be inlined, such as
to change the style of a word like <SPAN STYLE="font-family: Arial">
Arial</SPAN>.</P>

The DIV Element

The DIV element is similar to the SPAN element in function, with the main difference being that DIV (short for "division") is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different classes of containers, such as a chapter, abstract, or note. For example:

<DIV CLASS=note>
<H1>Divisions</H1>
<P>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</P>
<P>Since DIV may contain other block-level containers, it is useful for marking large sections of a document, such as this note.</P>
<P>The closing tag is required.</P>
</DIV>

A Note about Validation

Few CSS-styled documents will validate at the HTML 3.2 (Wilbur) level. HTML 3.2 does not define the SPAN element, nor the CLASS, STYLE, or ID attributes, and also lacks support for the TYPE and MEDIA attributes on the LINK and STYLE elements.

These style-related elements and attributes are not harmful to non-supporting browsers, as they are safely ignored. Documents using these elements and attributes may be validated against HTML 4.0.

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997-98 John Pozadzides and Liam Quinn. All rights reserved.


Style Sheet Dependence

Cascading Style Sheets have still not come into widespread use, but misuse of CSS has already begun. Style sheets, when used properly, can be an effective tool for providing a unique and attractive presentation, while still allowing a page to be accessible to all users. However, as soon as a page's message becomes dependent on the style sheet, the page has become a failure on the Web.

Style sheets were designed to allow the author to influence the presentation, but not to control it. Style sheets can be overridden by users who may choose--or require--their own style sheet. For these reasons, authors who depend on a certain style will find their pages inaccessible to a significant portion of users.

Poor uses of style sheets are demonstrated in many so-called CSS galleries. One common hack that has appeared in various places is that of the "drop shadow." This is created by using negative margins, and involves a large amount of dependence on the style sheet. When the style sheet is removed, either at the user's discretion or by using a browser that does not support CSS, the page is often unusable.

As an example, take a look at SpaceGUN Magazine, a fictional magazine featured in Microsoft's CSS Gallery. Using Microsoft Internet Explorer 3.01 with style sheets enabled, the presentation is certainly unique and eye-catching:

[Screen shot showing the title "SpaceGUN Magazine" with multiple drop shadows]

But as soon as style sheets are disabled, the result is very different, even using the same browser:

[Screen shot showing "SpaceGUN" repeated five times, followed by "Magazine" repeated five times, and then characters that do not line up properly, leaving gibberish.]

Quite clearly, the page is unusable on the Web due to its drop shadows and other negative margin tricks that leave many readers with a jumbled mess. The example also shows that dependence on style sheets is a recipe for failure. A Web document is not effective if it is not accessible.

Style sheet designers should take care to always ensure that their Web pages are in no way dependent on the style sheet. Some authors have tried to use the WingDings font to produce glyphs without the hassle and added download time of actual images. While the motive of reducing download time is admirable, such authoring is dependent on the user having the WingDings font and on the style sheet being enabled--conditions that can never be assured on the World Wide Web.

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


CSS References

Cascading Style Sheets, level 1
The W3C's Recommendation gives the complete specification for CSS1.
Quick Reference to Cascading Style Sheets, level 1
A handy quick reference for the properties and units of CSS1.
CSS draft specifications
The W3C's CSS home, with notes on browser and editor support, plus all the CSS drafts past and present.
CSS Frequently Asked Questions
A thorough list of frequently asked questions concerning CSS.
CSS Pointers
A comprehensive list of well-selected CSS links.
CSS Bugs/Workarounds
A listing of bugs and workarounds for widely used CSS browsers.
CSS1 support in Microsoft Internet Explorer 3.0
A look at CSS1 bugs and missing support in Microsoft Internet Explorer 3.0 for Windows 95 & NT 4.0.
Web Review Style Sheets Reference Guide
Helpful articles and the always-popular Browser Compatibility Charts.
Style Sheets Known Issues
Bugs and unsupported features in Netscape Navigator 4.0's CSS implementation.
CSS support in Amaya
Documentation of the CSS support in Amaya, the W3C's test-bed browser.

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997-98 John Pozadzides and Liam Quinn. All rights reserved.


BGSOUND - Background Sound

Internet Explorer only

Syntax

<BGSOUND>

Attribute Specifications

CLASS=string
LOOP=string
SRC=string
TITLE=string
BALANCE=string
ID=string
LANG=string
LANGUAGE=string
STYLE=string
VOLUME=string

Description:

"Enables an author to create pages with background sounds or soundtracks."

"The BGSOUND element can appear anywhere within the document."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

SRC

"Sets or retrieves the URL of a sound to play."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LOOP

"Sets or retrieves the number of times a sound or video clip will loop when activated."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

This attribute may be given a value of:

  • -1 (Loops infinitely)

  • 0 (Loops once)
  • Any positive integer Number of times to loop.

The default loop value of the element is 1.

VOLUME

"Sets or retrieves the volume setting for the sound."

"Valid values range from -10,000 to 0, with 0 being full Wave Output volume."

"The higher the setting, the louder the sound.

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

BALANCE

"Sets or retrieves the value indicating how the volume of the background sound is divided between the left and right speakers."

Values may range from -10,000 to +10,000.

"A -10,000 value indicates that all sound is directed to the left speaker. A +10,000 value indicates that all sound is directed to the right speaker. A zero value indicates that the sound is balanced between the left and right speakers."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {

  color: navy;

  background: transparent

}

P#secondp {

  color: black;

  background: transparent

}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

   <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
    | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
   SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}
.navbar IMG { float: right }
@media print {
  .navbar { display: none }
}

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

More Information

  • Microsoft MSDN Web Workshop - BGSOUND Element

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


BLINK - Flashing Text

Netscape Navigator Only

Syntax:

<BLINK>...</BLINK>

Can Contain:

  • Inline elements.

Contained in:

  • Inline elements

  • block-level elements except PRE

Description:

"The BLINK tag makes text blink on and off in Netscape Navigator."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


EMBED - Embedded Plug-in

Netscape Navigator and Internet Explorer Extension

Syntax:

<EMBED>...</EMBED>

Attribute Specifications

   ALIGN=[ left | center | right | justify ]
   (horizontal alignment)
TITLE=string
ID=string
CLASS=string
STYLE=string
LANG=Language (i.e. RU - Russian)
DIR=ltr|rtl
LANGUAGE=[ JScript | javascript | vbs |
   vbscript | XML | any browser-supported language ] SRC=string
ALT=Text
CODEBASE=url
CODE=CDATA
PLUGINURL=string
BORDER=Length
FRAMEBORDER=[ 1 |
   0 ] (frame border)
WIDTH=Length
   (image width)
HEIGHT=Length
   (image height)
HIDDEN
HSPACE=Pixels
NAME=CDATA
PLUGINSPAGE=string
PALETTE=[ FOREGROUND | BACKGROUND ]
VSPACE=Pixels
TYPE=ContentType

Description:

"Allows documents of any type to be embedded."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

"The EMBED tag displays output from a file that is executed by a plug-in. The output is displayed as part of the HTML document in a rectangular area of the page."

"A plug-in is an application written in a language such as C or C++ that has been plugged in to Navigator, so that it acts as an extension to the Navigator browser. When loaded, an embedded plug-in is displayed as part of the HTML document in a rectangular region of the page. This is similar to the way a GIF or JPEG image is embedded, except that the plug-in can be live and respond to user events, such as mouse clicks."

"The EMBED tag has an SRC attribute that specifies the file to run. The TYPE attribute specifies the MIME type of the plug-in needed to run the file. Navigator uses either the value of the TYPE attribute or the suffix of the filename given as the SRC to determine which plug-in to use. You must provide either the SRC or TYPE attribute."

"Users must have the appropriate plug-in installed in their browsers before they can see the results of running an embedded file that uses a plug-in. If a user opens a web document that uses an EMBED tag, and the plug-in needed by the EMBED tag is already installed, the results of running the embedded file are displayed automatically."

"If a user tries to open a web page that loads an uninstalled plug-in, the browser asks if the user wants to to install the plug-in. If the user ignores the prompt to load the plug-in, the browser displays a puzzle piece in the space reserved for the embedded file. The user can click on this at any time to get the Plug-in Finder page. This page takes the MIME type and file extension for the plug-in and tries to match it to available MIME handlers on the web site."

"You can use the NOEMBED tag to provide text to be displayed by browsers that cannot display plug-ins."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

NAME

NAME and ID values must be unique in any document, and different values must differ by more than just the case. Values must begin with a letter in the range A-Z or a-z, and may be followed by A-Z, a-z, 0-9, hyphens, underscores, colons, or periods. When linking to a named anchor, the name is treated as case sensitive.

STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

SRC

The IMG element specifies an inline image. The required SRC attribute specifies the location of the image. The image can be any format, though browsers generally only support GIF and JPEG images. Support for the PNG image format is growing slowly.

ALT

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the image rather than a description of the image. For example, ALT="Welcome to XYZ Corp." would be more appropriate than ALT="XYZ Corp. Logo" for a company's logo on its welcome page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images; see Use of ALT texts in IMGs for a thorough discussion.

WIDTH & HEIGHT

The WIDTH and HEIGHT attributes are most useful when they specify the exact dimensions of the image in pixels. This allows image-loading browsers to reserve the proper amount of space for the image and continue to render the rest of the document, thus giving the appearance of a faster-loading page.

Unfortunately, many graphical browsers will use these dimensions when not loading images, which can cause the ALT text to be cut off if the image is small or the ALT text is large. In such cases, authors may wish to leave off the WIDTH and HEIGHT attributes, depending on the importance of the ALT text and the placement of the image on the page (an image towards the end of the document without WIDTH and HEIGHT attributes will generally not noticeably slow the rendering of the page).

Authors can also specify different dimensions for the WIDTH and HEIGHT attributes, in which case browsers should scale the image. Percentages, relative to the horizontal or vertical space available (not relative to the image's natural size) can also be specified, though these are not as widely supported as pixel lengths. Since browsers typically do a poor job of scaling images, authors should avoid using WIDTH and HEIGHT for this purpose as much as possible.

CODE & CODEBASE

APPLET's CODE attribute specifies the name of the class file that contains the compiled Applet subclass. The value is relative to the url specified in the CODEBASE attribute, or to the HTML document's base url if the CODEBASE attribute is not given.

   <APPLET CODE="Animate.class" WIDTH=100 HEIGHT=100>
<PARAM NAME=img1 VALUE="/images/1.jpg">
<PARAM NAME=img2 VALUE="/images/2.jpg">
<IMG SRC="animation.gif" ALT=""
   WIDTH=100 HEIGHT=100>
</APPLET>

ALIGN

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the image. The values top, middle, and bottom specify the image's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the image with the current baseline. To center the image horizontally on the page, place the image in a centered block, e.g.,

<H1 ALIGN=center><IMG SRC="logo.gif" ALT="Welcome to XYZ Company"></H1>

The other ALIGN values, left and right, specify a floating image; the image is placed at the left or right margin and content flows around it. To place content below the image, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning images.

BORDER

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the image's border. Specifying BORDER=0 will eliminate the border around a linked image in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the image would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A HREF="reference/"><IMG
SRC="icon/reference.gif" ALT="" WIDTH=90
HEIGHT=90 BORDER=0>Web Authoring Reference</A>

DIR

The DIR attribute value is one of LTR for left to right, or RTL for right to left, e.g. DIR=RTL. Currently this attribute is supported by niether Netscape or MS Internet Explorer.

FRAMEBORDER

The FRAMEBORDER attribute specifies whether or not the frame has a visible border. The default value, 1, tells the browser to draw a border between the frame and all adjoining frames. The value 0 indicates that no border should be drawn, though borders from other frames will override this.

To fully remove the border, some browsers also require the use of other, non-standard attributes. See How do I remove the border around frames? for more details.

Note that removing the border of a frame takes away the user's ability to resize the frame on most browsers.

HIDDEN

"... specifies whether the plug-in is visible on the page. A value of TRUE overrides any HEIGHT and WIDTH to set both the width and height of the area occupied by the output of the embedded file to zero. The default is FALSE."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

PALETTE

"... is relevant only on the Windows platform. A value of FOREGROUND makes the plug-in use the foreground palette. Similarly, a value of BACKGROUND makes the plug-in use the background palette, which is the default. "

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

PLUGINSPAGE

"Retrieves the URL of the plug-in used to view an embedded document."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

PLUGINURL

"... is the URL of a Java Archive (JAR) file, which is a compressed collection of files that can be signed. The default plug-in invokes the JAR Installation Manager (JIM) with this JAR file URL, rather than loading the URL into a window. PLUGINURL takes precedence over PLUGINSPAGE. It is recommended that you use PLUGINURL rather than PLUGINSPAG. Navigator 4.0"

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TYPE

"When present, this attribute specifies the content type of a piece of content, for example, the result of dereferencing a URI. "

(From the W3C HTML 4.0 Recommendation)

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

    <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
     | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
    SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

VSPACE & HSPACE

The HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the applet. The value must be in pixels and applies to both sides of the applet. Style sheets provide more flexibility in specifying the space around applets.

LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)

  • Microsoft MSDN Online Web Workshop - HTML References (Elements))

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


HotDog Pro 6 Style Sheet Definitions

P, LI { font-family : "Tahoma";
font-size : 8.0pt;
color : black;
margin-left : 6.0pt;
margin-top : -5.0px;}

BODY { background-repeat : no-repeat;
background-color : white;
background-image : url(Help_Background.jpg);
background-position: 0.0in 0.0in;}

H1 { font-family : "Tahoma";
font-size : 14.0pt;
background-color : #0033CC;
text-align : center;
color : white;
border : solid purple 1.0pt;
margin-left : 70.0px;
margin-top : -5.0px;
margin-bottom : 12.0mm;}

H2 { font-family : "Tahoma";
font-style : normal;
font-weight : normal;
font-size : 10.0pt;
background-color : #0033CC;
color : white;
border : groove black 0.5pt;
padding-left : 2.0pt;}

PRE.HTMLCODE { font-family : "Courier New";
font-size : 8.0pt;
color : blue;}

PRE { font-size : 8.0pt;}

H3 { font-family : "Tahoma";
font-weight : bold;
font-size : 8.0pt;
color : navy;
margin-left : 6.0pt;
margin-bottom : 6.0pt;}

OL { margin-left : 12.0pt;}

UL { margin-left : 24.0pt;}

P.HTMLCODE { font-family : "Courier New";
font-size : 8.0pt;
color : blue;}

A:link { font-family : "Tahoma";
text-decoration : none;
color : #0000B7;}
A:visited { font-family : "Tahoma";
text-decoration : none;
color : #0000B7;}
UL.SMLIST { margin-left : 24.0pt;}

A:hover { text-decoration :underline;}
CITE.expandspot { font-style : normal;
color : green;
cursor: hand;}


ILAYER - Inline Layer

Netscape Navigator Only

Syntax:

<ILAYER>...</ILAYER>

Attribute Specifications

   ID=string
SRC=string
WIDTH=Length
   (image width)
HEIGHT=Length
ABOVE=string
BELOW=string
TOP=Length
LEFT=Length
BACKGROUND=url
BGCOLOR=Color
CLIP=Coords
VISIBILITY=[ SHOW | HIDDEN | INHERIT ]
Z-INDEX= integer
SCRIPTING EVENTS=string

Description:

"This tag allows you to offset content from its natural position in the page, which is the position the content would normally have if it was not positioned. That is, you can position the content relative to its natural position. This relatively positioned content is both inflow, in that it occupies space in the document flow, and inline, in the sense that it shares line space with other HTML elements. If you want relatively positioned content to appear on a separate line, you can insert a break before the ILAYER tag or embed the ILAYER tag in the DIV tag."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

SRC

"... specifies the pathname of a file that contains HTML-formatted content for the layer."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

WIDTH

"... specifies the width of the layer's content. It controls the right margin for wrapping purposes. The value can be expressed as an integer pixel value or as a percentage of the width of the containing layer."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

HEIGHT

"...specifies the height of the layer's clipping region and serves as the reference for setting the relative height of children layers. The value can be expressed as an integer pixel value or as a percentage of the height of the containing layer (or of the window for a top-level layer)."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

ID

"...specifies the name of the layer, enabling other layers and JavaScript scripts to refer to it."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

ABOVE

"...specifies the layer immediately on top of a newly created layer in the stacking order; that is, the new layer is created just below the layer specified by layername. The use of this attribute cannot be combined with the use of the BELOW or Z-INDEX attributes."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

BELOW

"...identifies the layer immediately beneath the newly created layer in the stacking order; that is, the new layer is created just above the layer specified by layername. The named layer must already exist. The use of this attribute cannot be combined with the use of the ABOVE or Z-INDEX attributes. "

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

BACKGROUND

"... specifies an image to use as the background."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

BGCOLOR

"... specifies the background color of the layer. See Color Units for information about color values."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

CLIP

"... specifies the clipping rectangle (viewable area) of the layer, which can be less than the width and height of the content of the layer. The value is a set of four numbers. Each of the four values represents numbers of pixels."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

LEFT and TOP

"... specify the horizontal and vertical positions of positioned layers or the relative horizontal and vertical positions for inflow layers."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

Z-INDEX

"... specifies the stacking order of a layer. Allows a layer's z-order to be specified in terms of an integer. Layers with higher numbered values are stacked above those with lower ones. Only positive Z-INDEX values are allowed. The use of this attribute cannot be combined with the use of the ABOVE or BELOW attributes."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

VISIBILITY

"... specifies whether the layer is visible or not. A value of SHOW shows the layer. A value of HIDDEN hides the layer. A value of INHERIT causes the layer to have the same visiblity as its parent layer."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


KEYGEN - Generate Key Material

Netscape Navigator Only

Syntax:

<KEYGEN>...</KEYGEN>

Attribute Specifications:

NAME=CDATA
CHALLENGE= string

Description:

"The KEYGEN tag facilitates the generation of key material and submission of the public key as part of an HTML form. This mechanism is designed for use in web-based certificate management systems. It displays a menu of key-size choices from which the user must choose one. Then, when the submit button is clicked, a key pair of the selected size is generated. The private key is encrypted and stored in the local key database. The public key and challenge string are DER encoded as PublicKeyAndChallenge and then digitally signed with the private key to produce a SignedPublicKeyAndChallenge. The SignedPublicKeyAndChallenge is base64 encoded, and the ASCII data is finally submitted to the server as the value of a name-value pair, where the name is specified by the NAME attribute of the KEYGEN tag."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

NAME

"... specifies the name for the name/value pair."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

CHALLENGE

"... specifies the challenge string to be packaged with the public key in the PublicKeyAndChallenge for use in verification of the form submission. If no challenge string is provided, then it is encoded as an IA5STRING of length zero. "

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


LAYER - Positioned HTML Content

Netscape Navigator Only

Syntax:

<LAYER>...</LAYER>

Attribute Specifications

ID=string
SRC=string
WIDTH=Length (image width)
HEIGHT=Length
ABOVE=string
BELOW=string
TOP=Length
LEFT=Length
BACKGROUND=url
BGCOLOR=Color
CLIP=Coords
VISIBILITY=[ SHOW | HIDDEN | INHERIT ]
Z-INDEX= integer
SCRIPTING EVENTS=string

Description:

"This tag allows you to position blocks of contents. These blocks of positioned content are also called layers. Navigator 4.0 Positioned blocks of content can overlap each other, be transparent or opaque, and be visible or invisible. They can also be nested. Use the LAYER tag to specify an absolute position for a block of content, and use the ILAYER tag to specify a relative position. In addition to using the LAYER tag to define positions for blocks of content, you can also use cascading style sheet syntax..."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

SRC

"... specifies the pathname of a file that contains HTML-formatted content for the layer."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

WIDTH

"... specifies the width of the layer's content. It controls the right margin for wrapping purposes. The value can be expressed as an integer pixel value or as a percentage of the width of the containing layer."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

HEIGHT

"...specifies the height of the layer's clipping region and serves as the reference for setting the relative height of children layers. The value can be expressed as an integer pixel value or as a percentage of the height of the containing layer (or of the window for a top-level layer)."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

ID

"...specifies the name of the layer, enabling other layers and JavaScript scripts to refer to it."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

ABOVE

"...specifies the layer immediately on top of a newly created layer in the stacking order; that is, the new layer is created just below the layer specified by layername. The use of this attribute cannot be combined with the use of the BELOW or Z-INDEX attributes."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

BELOW

"...identifies the layer immediately beneath the newly created layer in the stacking order; that is, the new layer is created just above the layer specified by layername. The named layer must already exist. The use of this attribute cannot be combined with the use of the ABOVE or Z-INDEX attributes. "

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

BACKGROUND

"... specifies an image to use as the background."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

BGCOLOR

"... specifies the background color of the layer. See Color Units for information about color values."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

CLIP

"... specifies the clipping rectangle (viewable area) of the layer, which can be less than the width and height of the content of the layer. The value is a set of four numbers. Each of the four values represents numbers of pixels."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

LEFT and TOP

"... specify the horizontal and vertical positions of positioned layers or the relative horizontal and vertical positions for inflow layers."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

Z-INDEX

"... specifies the stacking order of a layer. Allows a layer's z-order to be specified in terms of an integer. Layers with higher numbered values are stacked above those with lower ones. Only positive Z-INDEX values are allowed. The use of this attribute cannot be combined with the use of the ABOVE or BELOW attributes."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

VISIBILITY

"... specifies whether the layer is visible or not. A value of SHOW shows the layer. A value of HIDDEN hides the layer. A value of INHERIT causes the layer to have the same visiblity as its parent layer."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.
Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


LISTING - Font

Internet Explorer Only

Syntax:

<LISTING>...</LISTING>

Attribute Specifications:

   ID=string
CLASS=string
STYLE=string
TITLE=string
LANGUAGE=[ JScript | javascript | vbs |
   vbscript | XML | any browser-supported language ] LANG=Language
    (i.e. RU - Russian)
SCRIPTING EVENTS=string

Description:

"Renders text in a fixed-width font."

"This tag is no longer recommended. Use the PRE or SAMP tag instead."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

    <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
     | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
    SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

Scripting Events

A number of attributes that define client-side events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Microsoft MSDN Online Web Workshop - HTML References (Elements))

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


MARQUEE - Scrolling Text

Internet Explorer Only

Syntax:

<MARQUEE>...</MARQUEE>

Attribute Specifications:

   ID=string
CLASS=string
STYLE=string
TITLE=string
LANGUAGE=[ JScript | javascript | vbs |
   vbscript | XML | any browser-supported language ]
LANG=Language (i.e. RU - Russian)
ALIGN=[ top | middle | bottom | left | right ]
BACKGROUND=url
BEHAVIOR=[ alternate | scroll | slide ]
BGCOLOR=Color
CLASS= string
DIRECTION=[ left | right | up | down ]
WIDTH=Length
   (image width)
HEIGHT=Length
HSPACE=Pixels
VSPACE=Pixels
LOOP= Integer
SCROLLAMOUNT= Integer
SCROLLDELAY= Integer
DATAFLD= string (field name)
DATASRC= string (data source ID)
DATAFORMATAS=string
TRUESPEED
SCRIPTING EVENTS=string

Description:

"Creates a scrolling text marquee."

"The default width of the MARQUEE element is equal to the width of its parent element. When a MARQUEE is in a TD that does not specify a width, you should explicitly set the width of MARQUEE. If neither the MARQUEE nor the TD has a width specified, the marquee is collapsed to a 1-pixel width."

"To create a vertically scrolling marquee, set its scrollLeft property to 0. To create a horizontally scrolling marquee, set its scrollTop property to 0, overriding any script setting."

"The scrollLeft and scrollTop properties are read-only while the marquee is scrolling. When not scrolling, scrollLeft is read/write for a marquee set to scroll horizontally and scrollTop is read/write for a marquee set to scroll vertically."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>

  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">

    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>

  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

    <DIV CLASS=navbar>
<P><A HREF="/">Home</A>
     | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG
    SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

ALIGN

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the marquee. The values top, middle, and bottom specify the marquee's position with respect to surrounding content on its left and right.

The other ALIGN values, left and right, specify a floating marquee; the marquee is placed at the left or right margin and content flows around it. To place content below the marquee, use <BR CLEAR=left|right|all> as appropriate.

BACKGROUND

The BACKGROUND attribute suggests a background image for tiling on the marquee area.

BEHAVIOR

"Sets or retrieves how the text scrolls in the marquee."

Allowed values include:

"

  • scroll (Default.) Marquee scrolls in the direction specified by the direction property. The text scrolls off the end and starts over.

  • alternate Marquee scroll direction reverses when its content reaches the edge of the container.
  • slide Marquee scrolls in the direction specified by the direction property. The text scrolls to the end and stops.

"

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

BGCOLOR

"Sets or retrieves the background color behind the object."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

DIRECTION

"Sets or retrieves the direction in which the text should scroll."

Allowed values include:

"

  • left (Default.) Marquee scrolls left.

  • right Marquee scrolls right.
  • down Marquee scrolls down.
  • up Marquee scrolls up.

"

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

WIDTH

"Sets or retrieves the width of the object."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

HEIGHT

"Sets or retrieves the height of the object."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

VSPACE & HSPACE

The HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around objects. The value must be in pixels and applies to both sides of the object.

LOOP

"Sets or retrieves the number of times a MARQUEEwill play."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

Setting a value of 0 or -1 causes the marquee to loop infinitely.

SCROLLAMOUNT

"Sets or retrieves the number of pixels the text scrolls between each subsequent drawing of the marquee."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

If not explicitly set, this value will be 6.

SCROLLDELAY

"Sets or retrieves the speed of the marquee scroll. "

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

If not explicitly set, this value will be 85.

DATAFLD

"Sets or retrieves which field of a given data source, as specified by the dataSrc property, to bind to the specified object. "

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

DATASRC

"Sets or retrieves the source of the data for data binding."

"The property takes a string that corresponds to the unique identifier of a data source object (DSO) on the page. The string must be prefixed by a number sign (#)."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

DATAFORMATAS

"Sets or retrieves how to render the data supplied to the object."

Possible values include:

  • text (default). Data is rendered as text.

  • html Data is rendered as HTML.
  • localized-text Microsoft® Internet Explorer 5.01 and later versions. Data is rendered using the locale settings of the client machine.

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TRUESPEED

"Sets or retrieves whether the position of the marquee is calculated using the scrollDelay and scrollAmount properties and the actual time elapsed from the last clock tick."

When NOT set (FALSE) : "Marquee computes movement based on 60-millisecond ticks of the clock. This means every scrollDelay value under 60 is ignored, and the marquee advances the amount of scrollAmount each 60 milliseconds. For example, if scrollDelay is 6 and scrollAmount is 10, the marquee advances 10 pixels every 60 milliseconds."

When set (TRUE) : "Marquee advances the pixel value of scrollAmount by the number of milliseconds set for scrollDelay. For example, the marquee would advance 10 pixels for every 6 milliseconds if scrollDelay is 6, scrollAmount is 10, and the value of trueSpeed is true."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

Scripting Events

A number of attributes that define client-side events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Microsoft MSDN Online Web Workshop - HTML References (Elements))

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


MULTICOL - Multiple Column Formatting

Netscape Navigator Only

Syntax:

<MULTICOL>...</MULTICOL>

Attribute Specifications:

COLS= integer
GUTTER=Pixels
WIDTH=Pixels

Description:

"The MULTICOL tag establishes an area of the document as having multiple, equal-width columns."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

COLS

"... specifies the number of text columns for the text display. Netscape Navigator attempts to flow elements evenly across the columns to make each column be about the same height. Unless the WIDTH attribute is present, column width is adjusted to fill the available width. "

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

GUTTER

"...specifies the distance between each columns in pixels. If it is not specified, Netscape Navigator uses 10."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

WIDTH

"... specifies the width of each column in pixels. All columns are the same width. If WIDTH is not present, its value is calculated from the gutter width and the number of columns. "

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)
Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


NOBR - No Break

Netscape Navigator and Internet Explorer Extension

Syntax:

<NOBR>...</NOBR>

Attribute Specifications:

    ID=string
CLASS=string
STYLE=string
TITLE=string
LANGUAGE=[ JScript | javascript | vbs | vbscript | XML | any browser-supported language ]
LANG=Language (i.e. RU - Russian)

Description:

"The NOBR tag ensures that a line of text does not wrap to the next line. This tag is useful for words or phrases that must be kept together on one line. However, note that if the line of text is long, it can extend beyond the margin of the browser window, so the user must use scrollbars to view the text."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>
STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)
Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


NOEMBED - Alternative Text for Embedded Objects

Netscape Navigator Only

Syntax:

<NOEMBED>...</NOEMBED>

Description:

"The NOEMBED tag specifies text to be displayed by browsers that cannot display content from plug-in programs. Browsers that can display plug-ins ignore all text in the NOEMBED tag."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


NOLAYER - Alternative Text for Layers

Netscape Navigator Only

Syntax:

<NOLAYER>...</NOLAYER>

Description:

"Content that is surrounded by and tags is displayed by browsers that do not support the LAYER and ILAYER tags. This content is ignored by browsers that do support these tags. Therefore, you can use the tag to display content in browsers that will not support the LAYER and ILAYER tags. Navigator 4.0 Note, however, that browsers that do not support the LAYER and ILAYER tags will display content inside the these tags, but the browsers will ignore all positioning information and will lay all the content out sequentially. You could use the SRC attribute to specify positioned content that is stored in a separate file, and then use the NOLAYER tag to display an advisory message to users that they need a LAYER-enabled browser such as Netscape Navigator 4.0 to view the page."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


PLAINTEXT - Font

Internet Explorer Only

Syntax:

<PLAINTEXT>...</PLAINTEXT>

Attribute Specifications:

ID=string
CLASS=string
STYLE=string
TITLE=string
LANGUAGE=[ JScript | javascript | vbs | vbscript | XML | any browser-supported language ]
LANG=Language (i.e. RU - Russian)
SCRIPTING EVENTS=string

Description:

"Renders text in a fixed-width font without processing tags."

"This tag is no longer recommended."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>
STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

Scripting Events

A number of attributes that define client-side events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Microsoft MSDN Online Web Workshop - HTML References (Elements))
Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


SERVER - Server Side Script

Netscape Navigator Only

Syntax:

<SERVER>...</SERVER>

Description:

"The SERVER tag specifies server-side JavaScript statements that are used in a JavaScript application on the server. (Contrast this with theSCRIPT tag, which specifies client-side JavaScript statements that run in the browser.) When a script is specified within the SERVER tag, it is run on the server before the page is passed to the browser."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


MULTICOL - Multiple Column Formatting

SPACER - Extra Space

Netscape Navigator Only

Syntax:

<SPACER>

Attribute Specifications:

TYPE=[ HORIZONTAL | VERTICAL | BLOCK ]
ALIGN=[ LEFT | RIGHT | TOP | ABSMIDDLE | ABSBOTTOM | TEXTTOP | MIDDLE | BASELINE | BOTTOM ]
SIZE=Pixels
HEIGHT=Pixels
WIDTH=Pixels

Description:

"The SPACER tag inserts a space in the document. The space can be between characters or between lines, or it can be a spacing rectangle, similar to an invisible image."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

TYPE

"... specifies whether the extra space is inserted between characters or between lines, or whether it is a rectangular space that is effectively an invisible image. The value can be one of the following:

  • HORIZONTAL inserts horizontal space between two characters. The width of this space is specified by the SIZE attribute.
  • VERTICAL inserts vertical space between lines. Netscape Navigator adds a line break to end the current line, then adds the vertical space before the beginning of the next line. The height of the space is specified by the SIZE attribute.
  • BLOCK behaves almost exactly like an invisible image. Netscape Navigator ignores any SIZE attribute and instead uses the HEIGHT, WIDTH, and ALIGN attributes to define a spacing rectangle."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

ALIGN

"... applies only when the extra space is a block. It specifies the alignment of the spacing rectangle in relation to the surrounding text. If you do not specify a value for ALIGN, Navigator uses "BOTTOM" as the default. The values are the same as the values of ALIGN for the IMG tag."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

WIDTH

"... applies only when the extra space is a block. It specifies the width of the spacing rectangle in pixels."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

HEIGHT

"... applies only when the extra space is a block, and specifies the height of the spacing rectangle in pixels."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

SIZE

"... depends on the value of TYPE. When the spacer is of type HORIZONTAL or VERTICAL, the SIZE attribute specifies the absolute width or height in pixels of the added space. If the extra space is a block, the SIZE attribute is ignored."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)
Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


WBR - Word Break

Netscape Navigator and Internet Explorer Extension

Syntax:

<WBR>

Attribute Specifications:

    ID=string
CLASS=string
STYLE=string
TITLE=string
LANGUAGE=[ JScript | javascript | vbs | vbscript | XML | any browser-supported language ]
LANG=Language (i.e. RU - Russian)

Description:

"The WBR tag marks a place where a line break can take place. It does not necessarily always result in a line break; rather, it says that line breaks are allowed at this place. You could use it, for example, inside a NOBR tag to allow a line break."

"The WBR tag does not require a closing tag."

(From the Netscape DevEdge Online Documentation HTML Tag Reference.)

"Inserts a soft line break into a block of NOBR text."

"A soft line break is a point inside a NOBR section at which a line break is permitted but not required."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>
STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

More Information

  • Netscape DevEdge Online Documentation HTML Tag Reference.)
  • Microsoft MSDN Online Web Workshop - HTML References (Elements))
Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


XMP - Font

Internet Explorer Only

Syntax:

<XMP>...</XMP>

Attribute Specifications:

ID=string
CLASS=string
STYLE=string
TITLE=string
LANGUAGE=[ JScript | javascript | vbs | vbscript | XML | any browser-supported language ]
LANG=Language (i.e. RU - Russian)
SCRIPTING EVENTS=string

Description:

"Renders text used for examples in a fixed-width font."

"This tag is no longer recommended. Use the PRE or SAMP tag instead."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>
STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
LANGUAGE

"Sets or retrieves the language in which the current script is written. "

"The language property can refer to any scripting language."

(From the Microsoft MSDN Online Web Workshop - HTML References (Elements))

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

Scripting Events

A number of attributes that define client-side events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Microsoft MSDN Online Web Workshop - HTML References (Elements))
Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Jarrod Durnan


Internal Anchor Example

Table of Contents

A | B | C | D | E | F | G | H | I | J | K | L | M
N | O | P | Q | R | S | T | U | V | W | X | Y | Z

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z


Bosch 1

Bosch's Art
If we know little about Bosch's life, we know even less about his artistic background. It is generally assumed that he was trained by his father or one of his uncles, but all their paintings have been lost. Some light can be cast on the stylistic origins of Bosch's work, by considering the context in which they were painted.
Numerous paintings bearing Bosch's name can be found in museums and private collections throughout Europe and the United States. Many of these pictures are only copies of his original compositions, however, a small group of drawings can be attributed to him with reasonable certainty.

From "The Complete Paintings of Bosch" - Walter Bosing.


Contact Me!!!
Hi - I hoped you liked my web page on Bosch. If you have any comments as to how I could improve my page, or interesting Bosch links, please e-mail me. If you are using Netscape, you can use the form below to send me e-mail.

Some of my Favorite Links

Altavista
Sausage Software
They Might Be Giants
Advanced Book Exchange
Amazon.com


History 1- Frames

Bosch - A brief history
Bosch's pictures have always fascinated viewers, but in earlier centuries it was widely assumed that his diabolic scenes were merely to amuse or titillate. The Spaniard Felipe de Guevara complained in the earliest account of Bosch's art, written about 1560, Most people regarded him as merely 'the inventor of monsters and chimeras'.
In our own century, however, scholars have come to realize that Bosch's art possesses a more profound significance, and there have been many attempts to explain its origins and meaning. His name is frwequently linked with Salvador Dali. For others, Bosch's art reflects esoteric practices of the Middle Ages, such as alchemy, astrology or witchcraft.

From "The Complete Painting of Bosch" - Walter Bosing


Welcome

The Bosch Art Page
Welcome to my home page, which I have dedicated to Hieronymous Bosch. To learn about Bosch's history, click the 'history' button on the side of the page. If you are interested in criteqical opion on his art, click the 'art' button.
To contact me, click the 'contact me' button. You can either send me an email, or fill out a feed back form.
Hieronymous Bosch was an Dutch artist during the 15th century (that is, he painted from about 1470 -1510) I like his work because of its surrealistic quality.
During the time Bosch lived, Christians were burning and killing many people that did not strictly conform to their methodologies. So to present any work different from the norm was dangerous. Indeed, charges of heresy were brought against Bosch in 1500

Next Page


Welcome, part II - Frames version

More about my website...
This page would usually be used to describe some of your interests, and contain links to other themes on your website. This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.
This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.This page would usually be used to describe some of your interests, and contain links to other themes on your website.
Previous Page


JavaScript Editor Example.

Move your mouse over the circle below:

This example works under Netscape 3,4 and Microsoft Internet Explorer 4.2
Note: This code will not work in ROVER.


Table Demo Example

Table Demo
This is where your text would appear. Note: The table width is set to 600 pixels. This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear.
This is where your text would appear. Note: The table width is set to 600 pixels. This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear. Note: The table width is set to 600 pixels.This is where your text would appear.